CSS Flat UI Buttons

CSS Flat UI Buttons

 

So, i came across this video tutorial on how to do CSS buttons with a shadow on the bottom, thought they looked very nice, smooth and modern.

I gave them a little twist of my own, added some more color and sizes in the CSS, and came up with the buttons shown in the image up top.

Feel free to copy and try out my CSS. For more info, you can watch the Youtube video in question below. Enjoy 🙂

 

Click here for a JSfiddle DEMO

/*
Code snippet downloaded from http://www.mennovanderkrift.com
Author: Menno van der Krift
*/
.button,
button{
border-width: 0;
text-decoration: none;
position: relative;
background-color: #b4da55;
color: #fff;
padding: 10px 25px;
display: inline-block;
line-height: normal;
vertical-align: middle;
text-align: center;
cursor: pointer;
border-radius: 5px;
margin: 0 0 10px;
font-size: 12pt;
}

.button:after,
button:after{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
border-radius: 5px;
content: ' ';
box-shadow: inset 0 -3px rgba(0, 0, 0, 0);

transition: box-shadow 0.3s;
-o-transition: box-shadow 0.3s;
-moz-transition: box-shadow 0.3s;
-webkit-transition: box-shadow 0.3s;
}

.button:hover:after,
button:hover:after{
box-shadow: inset 0 -3px rgba(0, 0, 0, .25);
}

.button.btn-small,
button.btn-small{
font-size: 0.9rem;
padding: 8px 20px;
}

.button.btn-large,
button.btn-large{
font-size: 1.2rem;
padding: 15px 30px;
}

.btn-error{
background-color: #e74c3c;
}

.btn-purple{
background-color: #8e44ad;
}

.btn-blue{
background-color: #2980b9;
}

.btn-warning{
background-color: #e67e22;
}

Leave a Reply

Your email address will not be published. Required fields are marked *


*