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
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;

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;

box-shadow: inset 0 -3px rgba(0, 0, 0, .25);

font-size: 0.9rem;
padding: 8px 20px;

font-size: 1.2rem;
padding: 15px 30px;

background-color: #e74c3c;

background-color: #8e44ad;

background-color: #2980b9;

background-color: #e67e22;

Leave a Reply

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


This site uses Akismet to reduce spam. Learn how your comment data is processed.