Creating a beautiful CSS3 Button

Design matters. If you have interest and passion for front-end designing you have a lot to learn and experiment.

So, we gonna create a button and it is not the stereotype.  We will use pseudo-classes to make our button effective.

Let us have a look what we are up to.

Let’s proceed.

This the very first step. We have nested Div in a Div. We have an anchor inside the nested Div. Easy huh? So here is our HTML structure.

<div class="main">
    <div class="mgma_btn">
        <a href="#">Buy Now</a>
    </div>
</div>

Output:

Now let’s add CSS.

So, first of all, we have designed our anchor text by setting color and making it bold... Then we proceed to design our div which have the class (.mgma_btn).

a {
    text-decoration: none;
    color: #fff;
    font-weight: bold;
}
.mgma_btn {
    padding: 15px;
    font-family: tahoma;
    background-color: #F57900;
    width: 140px;
    text-align: center;
    margin: 340px auto;
    text-shadow: 1px 1px #F57900;
    border-bottom: 5px solid #C86504;
    position: relative;
}

And we get,

Output:

Further, we will create strip on both sides of the button. To achieve the double horizontal line we have used the border-top property in our CSS.  Further, we will use the ‘Pseudo Elements – :after/:before’ to set the strips before and after the button.

.mgma_btn::before {
    content: "";
    border-top: 4px double #003366;
    position: absolute;
    top: 24px;
    height: 2px;
    display: block;
    width: 100px;
    left: -110px;
    transition: 1s;
}
.mgma_btn::after {
    content: "";
    border-top: 4px double #003366;
    position: absolute;
    top: 24px;
    height: 2px;
    display: block;
    width: 100px;
    left: 180px;
    transition: 1s;
}

Output:

We can use two Pseudo Elements together. So, we have added :before/ :after in our class .mgma_btn:hover.  Let's add some more CSS to animate on Hover.

.mgma_btn:hover:after {
    border-color: #C86504;
    width: 320px;
    transition: 1s;
    /* add smoothness to effect*/
    
    top: 65px;
    left: -80;
    transform: rotate(180deg);
    /*rotate the strips on hover by 180 degree*/
}
.mgma_btn:hover:before {
    border-color: #C86504;
    width: 320px;
    transition: 1s;
    top: -20px;
    /*set the position*/
    
    left: -80;
    /*set the position*/
    
    transform: rotate(180deg);
}

Output:

This is it. We get a beautiful button with animation. You may tweak the codes written above and get something incredible.

If you have any issue, let us know in the comment box.