Flat Button Design CSS
In modern web design, flat design has easily become a trend because it is really simple, elegant, professional and easy to implement in responsive designs. They are commonly used in login forms, register forms or even in control forms that needs data submission.
In this post, we'll make a flat button design using using purely CSS!
Step 1: Create your button inside the <body> tag
Step 1: Create your button inside the <body> tag
<body>
<input type='button' class='Green' value='Green'>
</body>
Step 2: Apply CSS to input[type='button'] and to its :active selector
input[type='button']{
position: relative;
vertical-align: top;
color: white;
text-align: center;
border: 0;
cursor: pointer;
padding: 5px 20px;
margin-right: 10px;
margin-bottom: 10px;
width:100px;
}
input[type='button']:active{
top: 1px;
outline: none;
-webkit-box-shadow: none;
box-shadow: none;
}
Step 3: Apply class CSS code to specific color. For instance, green.
.Green{
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
background: #27ae60;
border-bottom: 2px solid #219d55;
cursor: pointer;
-webkit-box-shadow: inset 0 -2px #219d55;
box-shadow: inset 0 -2px #219d55;
}
Step 4: Save the file and preview your work in your browser. You should end up with the same result like this:
And there it is! You can play around its background properties as well. I highly suggest you use pastel colors.
Here are the codes for the other colors:
.Blue{
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
background: #5C97BF;
border-bottom: 2px solid #4B77BE;
cursor: pointer;
-webkit-box-shadow: inset 0 -2px #4B77BE;
box-shadow: inset 0 -2px #4B77BE;
}
.Red{
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
background: #D64541;
border-bottom: 2px solid #CF000F;
cursor: pointer;
-webkit-box-shadow: inset 0 -2px #CF000F;
box-shadow: inset 0 -2px #CF000F;
}
.Purple{
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
background: #BF55EC;
border-bottom: 2px solid #9A12B3;
cursor: pointer;
-webkit-box-shadow: inset 0 -2px #9A12B3;
box-shadow: inset 0 -2px #9A12B3;
}
.Yellow{
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
background: #F5D76E;
border-bottom: 2px solid #F7CA18;
cursor: pointer;
-webkit-box-shadow: inset 0 -2px #F7CA18;
box-shadow: inset 0 -2px #F7CA18;
}
.Orange{
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
background: #EB974E;
border-bottom: 2px solid #F9690E;
cursor: pointer;
-webkit-box-shadow: inset 0 -2px #F9690E;
box-shadow: inset 0 -2px #F9690E;
}
.Gray{
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
background: #95A5A6;
border-bottom: 2px solid #6C7A89;
cursor: pointer;
-webkit-box-shadow: inset 0 -2px #6C7A89;
box-shadow: inset 0 -2px #6C7A89;
}
.Pink{
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
background: #D2527F;
border-bottom: 2px solid #DB0A5B;
cursor: pointer;
-webkit-box-shadow: inset 0 -2px #DB0A5B;
box-shadow: inset 0 -2px #DB0A5B;
}
This Flat Button CSS Design can also be used to submit buttons as well. This is a hassle-free styling buttons - one can avoid using <div> and javascript just to retain submit functionality and having a stylized button at the same time. By this, we just used pure CSS so, the buttons and submit buttons will work as normal.
If you use this to your project or website, please inform us through our comment section.