Home

Super Cool CSS Button Code For Website

Super Cool CSS Button Code For Website


Super Cool CSS Button Code For Website
Super Cool CSS Button Code For Website

Super Cool CSS Button Code For Website

Web design is growing very fast and one of the current web design trends is a simple design or minimalism as possible. Minimal web design includes layout, buttons, navigation bar, sidebar, colours, typography and more ...

Many people will feel comfortable designing a simple but sometimes helpful website people find it hard to see because it's so simple and not so special. Minimal web design is often called a flat design or material design.

Super Cool CSS Button Code For Website

And today I will guide you to make a Button completely with CSS & HTML extremely simple but no less special.

HTML

<a href="#" class="action-button shadow animate blue">Click Preview</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;
}
.red
{
 background-color: #e74c3c;
 border-bottom: 5px solid #c0392b;
 text-shadow: 0px -2px #c0392b;
}
.green
{
 background-color: #2ecc71;
 border-bottom: 5px solid #27ae60;
 text-shadow: 0px -2px #27ae60;
}
.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;
}


In this CSS I have 4 colours: blue, red, green and yellow
You change blue in HTML to red, green, yellow, whatever you like, or you can write your own different colour CSS for the friend.
Newer post Older post

RELATED ARTICLES