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.

THÔNG TIN THANH TOÁN & DỊCH VỤ:

• Tên tài khoản: Nguyễn Anh Tuấn
• Số tài khoản: 0501000058467
• Ngân hàng TMCP Ngoại thương Việt Nam (Vietcombank) - Chi nhánh Bắc Sài Gòn
• Hỗ trợ cài đặt: fb.com/kequaduongvodanh
• Dịch vụ: Xem chi tiết >>
  + Nhận convert template từ Wordpress
  + Sửa lỗi, nâng cấp template
  + Thiết kế Form Liên hệ từ Google Form