How To Make Creative CSS Button Style

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.

Demo 1

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 2

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 3

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 4

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

See Full Demo

Advertisement