Fostrap

Sharing Tutorial, Template dan Widget Blogger

» » » » » Creative CSS Button Style Tutorial

February 11, 2016

Creative CSS Button Style Tutorial

    No comments
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 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

Subscribe to our Newsletter

Tags :

Wisnu ST

Yo! I'm Wisnu ST. I'm surfers search engine. I'm blogger. I'm cat lovers. Im everywhere. I'm based in Tangerang, Hire me!

No comments :

Post a Comment

Subscribe to: Post Comments ( Atom )