CSS3 Buttons

How to create completely Css3 3D buttons with hover effects (like the ones on the left)

To view what we are about to create click here

Lets first start with the HTML all we need here is an anchor link

 <a href="#" class="button blue">A nice CSS3 Button</a>

I’ve given our anchor tag a class of button and blue. The button class is for the base button style and blue is to colour this button blue. Lets move onto these Styles I’ve tried to comment to show what we are doing. If theres anything else you want to know just leave a comment.

Base button class

 .button{ font-family: adelle,serif; font-style: italic; font-weight: 300; /* Set out text background color*/ color: #ffffff; display: inline-block; /*give the button some padding 5px top and bottom and 10 on each side*/ padding: 5px 10px; margin: 5px 0; /* remove the underline from our text*/ text-decoration: none; /* add a transition so when we hover the button will move down over .1s*/ -webkit-transition: all .1s ease-in-out; -moz-transition: all .1s ease-in-out; -o-transition: all .1s ease-in-out; transition: all .1s ease-in-out; /* give our button some fancy rounded corners*/ -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } 

Hover class for button

 .button:hover{ /* make the positon relative so we can move the button*/ position: relative; /* move the button down 4px*/ top: 4px; /*remove the shadow of the button we are yet to add this we will add the shadow with the colour class*/ -moz-box-shadow: 0 0 0; -webkit-box-shadow: 0 0 0; box-shadow: 0 0 0; } 

Adding different colours

We now have the base styles for our buttons done but they wont work right yet we need to add a colour class. You can alternatively add these colour class styles into the above styles but if you want to make multiple different coloured buttons this is a good way to do it.


 .blue{ /* adding a border darker than our background colour*/ border: 1px solid #0b4678; /* a 3 stop gradient to add a nice button colour effect change the colours for different buttons */ background: -moz-linear-gradient(90deg, #2e88e4 0%, #4badee 93.4%, #8cd7f3 100%) #3da1e9; background: -webkit-gradient(linear, left bottom, left top, from(#2e88e4), color-stop(0.934, #4badee), to(#8cd7f3)) #3da1e9; /* adding a shadow use a similar colour to your border and a bit of opacity */ -moz-box-shadow: 0 4px 0 rgba(16, 51, 106, 0.85); -webkit-box-shadow: 0 4px 0 rgba(16, 51, 106, 0.85); box-shadow: 0 4px 0 rgba(16, 51, 106, 0.85); } 


 .green{ border: 1px solid #085f0b; background: -moz-linear-gradient(90deg, #30de31 0%, #88f88f 93.9%, #c2fbd1 100%) #5ced70; background: -webkit-gradient(linear, left bottom, left top, from(#30de31), color-stop(0.939, #88f88f), to(#c2fbd1)) #5ced70; -moz-box-shadow: 0 4px 0 rgba(7, 95, 25, 0.85); -webkit-box-shadow: 0 4px 0 rgba(7, 95, 25, 0.85); box-shadow: 0 4px 0 rgba(7, 95, 25, 0.85); } 

Extra things

changing the colour of the button on hover as well – add a hover effect to .blue or your other colour of choice

 .blue:hover{ /* add border bottom if you remove it from your colour choice*/ border-bottom: 1px solid #0b4678; background: -moz-linear-gradient(90deg, #4badee 0%, #2e88e4 94%, #8cd7f3 100%) #3da1e9; background: -webkit-gradient(linear, left bottom, left top, from(#4badee), color-stop(0.94, #2e88e4), to(#8cd7f3)) #3da1e9; } 

If you found this at all useful please tweet this and leave a comment letting me know and I may do more in the future.

View Demo