Creative CSS Button Style Tutorial

Web design is highly developed so fast, I can't imagine what else will come in 2017, in 2016 is very much the trend of web design that is very popular with its beauty, namely minimalist web design, minimalist web design includes layout, button, navbar, sidebar, colors, typography and more. Many are comfortable with minimalist web design because web design minimalist, very unsightly by eyes, and because of the minimalist design is very simple and not too complicated, minimalist web design is often referred to as the style of material design and flat design. This is Creative CSS Button Style Tutorial by Fostrap

Creative CSS Button Style

1. Primary Button

HTML

<a href="#" class="action-button shadow animate blue">Submit</a>

CSS

.animate
{
transition: all 0.1s;
-webkit-transition: all 0.1s;
}
.action-button
{
position: relative;
padding: 10px 40px;
        margin: 0px 10px 10px 0px;
border-radius: 3px;
font-family: 'Lato', sans-serif;
font-size: 18px;
color: #FFF;
text-decoration: none; }
.blue
{
background-color: #3498db;
border-bottom: 5px solid #2980B9;
text-shadow: 0px -2px #2980B9;
}
.action-button:active
{
transform: translate(0px,5px);
  -webkit-transform: translate(0px,5px);
border-bottom: 1px solid;
}

Demo : Submit

2. Danger Button

HTML

<a href="#" class="action-button shadow animate red">Submit</a>

CSS

.animate
{
transition: all 0.1s;
-webkit-transition: all 0.1s;
}
.action-button
{
position: relative;
padding: 10px 40px;
        margin: 0px 10px 10px 0px;
border-radius: 3px;
font-family: 'Lato', sans-serif;
font-size: 18px;
color: #FFF;
text-decoration: none; }
.red
{
background-color: #e74c3c;
border-bottom: 5px solid #c0392b;
text-shadow: 0px -2px #c0392b;
}
.action-button:active
{
transform: translate(0px,5px);
  -webkit-transform: translate(0px,5px);
border-bottom: 1px solid;
}

Demo : Submit

3. Success Button

HTML

<a href="#" class="action-button shadow animate green">Submit</a>

CSS

.animate
{
transition: all 0.1s;
-webkit-transition: all 0.1s;
}
.action-button
{
position: relative;
padding: 10px 40px;
        margin: 0px 10px 10px 0px;
border-radius: 3px;
font-family: 'Lato', sans-serif;
font-size: 18px;
color: #FFF;
text-decoration: none; }
.green
{
background-color: #2ecc71;
border-bottom: 5px solid #27ae60;
text-shadow: 0px -2px #27ae60;
}
.action-button:active
{
transform: translate(0px,5px);
  -webkit-transform: translate(0px,5px);
border-bottom: 1px solid;
}

Demo : Submit

4. Warning Button

HTML

<a href="#" class="action-button shadow animate yellow">Submit</a>

CSS

.animate
{
transition: all 0.1s;
-webkit-transition: all 0.1s;
}
.action-button
{
position: relative;
padding: 10px 40px;
        margin: 0px 10px 10px 0px;
border-radius: 3px;
font-family: 'Lato', sans-serif;
font-size: 18px;
color: #FFF;
text-decoration: none; }
.yellow
{
background-color: #f1c40f;
border-bottom: 5px solid #f39c12;
text-shadow: 0px -2px #f39c12;
}
.action-button:active
{
transform: translate(0px,5px);
  -webkit-transform: translate(0px,5px);
border-bottom: 1px solid;
}

Demo : Submit

See full demo here