Fancy CSS Buttons!

2 minutes read / Resources

Lets create some fancy CSS buttons

Below is a step by step guide on creating some visually appealing buttons. During this we’re going to be coding using SCSS (Sassy CSS) and the Koala App (we highly recommend) for the compilation.

Lets begin. Firstly we’re going to style a simple ghost button under the class “.bttn”.

.bttn {
    position:relative;
    padding:8px 20px;
    border:2px solid $green;
    transition:300ms all;
}

Having coded a basic button class, our button now looks like this:

screen-shot-2016-10-11-at-16-18-41

Now, to go one step further we are going to be using Pseudo elements. Using SCSS to nest pseudo elements we’re going to add some corners to our buttons:

.bttn {
    position:relative;
    padding:8px 20px;
    border:2px solid $green;
    transition:300ms all;
    &:before {
        content:'';
        display:inline-block;
        position:absolute;
        top:-7px;
        left:-7px;
        background:transparent;
        border-left:2px solid $green;
        border-top:2px solid $green;
        width:20px;
        height:20px;
        transition:300ms all;
    }    
    &:after {
        content:'';
        display:inline-block;
        position:absolute;
        bottom:-7px;
        right:-7px;
        background:transparent;
        border-bottom:2px solid $green;
        border-right:2px solid $green;
        width:20px;
        height:20px;
        transition:300ms all;
    }
}

We will now be left with a button that looks like this:

screen-shot-2016-10-11-at-16-25-46

Lets add some hover animation to the button! – To do this we will be changing the background and link colour on hover as well as making the pseudo elements full height and width.

.bttn {
    position:relative;
    padding:8px 20px;
    border:2px solid $green;
    transition:300ms all;
    &:before {
        content:'';
        display:inline-block;
        position:absolute;
        top:-7px;
        left:-7px;
        background:transparent;
        border-left:2px solid $green;
        border-top:2px solid $green;
        width:20px;
        height:20px;
        transition:300ms all;
    }    
    &:after {
        content:'';
        display:inline-block;
        position:absolute;
        bottom:-7px;
        right:-7px;
        background:transparent;
        border-bottom:2px solid $green;
        border-right:2px solid $green;
        width:20px;
        height:20px;
        transition:300ms all;
    }
    &:hover {
        background:lighten($green,8{3eb5e81dc2dbd5243766a445dfd7203b99614852f30724c0fcd7c1e47478fab9});
        &:after {
            width:100{3eb5e81dc2dbd5243766a445dfd7203b99614852f30724c0fcd7c1e47478fab9};   
            height:100{3eb5e81dc2dbd5243766a445dfd7203b99614852f30724c0fcd7c1e47478fab9};
        }
        &:before {
            width:100{3eb5e81dc2dbd5243766a445dfd7203b99614852f30724c0fcd7c1e47478fab9};   
            height:100{3eb5e81dc2dbd5243766a445dfd7203b99614852f30724c0fcd7c1e47478fab9};
        }
    }
}

So now when we hover over our button the background colour will change to a slightly darker green and the pseudo elements will become full width – Theres one issue with this though, because our buttons will vary in length we are unable to set an exact width so our corners won’t reach each other like in the gif below.

In order to fix this we will be using the CSS calc() function in order to work out the width of each button. We want our pseudo elements to stretch to full width and height of each button + 14px. This is because we absolute positioned our pseudo elements outside of our button to act as corners.

    &:hover {
        background:lighten($green,8{3eb5e81dc2dbd5243766a445dfd7203b99614852f30724c0fcd7c1e47478fab9});
        &:after {
            width:calc(100{3eb5e81dc2dbd5243766a445dfd7203b99614852f30724c0fcd7c1e47478fab9} + 14px);   
            height:calc(100{3eb5e81dc2dbd5243766a445dfd7203b99614852f30724c0fcd7c1e47478fab9} + 14px);
        }
        &:before {
            width:calc(100{3eb5e81dc2dbd5243766a445dfd7203b99614852f30724c0fcd7c1e47478fab9} + 14px);   
            height:calc(100{3eb5e81dc2dbd5243766a445dfd7203b99614852f30724c0fcd7c1e47478fab9} + 14px);
        }
    }

Now we end up with the following result:

Next
Previous
Your browser is out-of-date!

Update your browser to view this website correctly.Update my browser now

×