Button CSS xu hướng thiết kế web đơn giản trong năm 2019

Thiết kế web đang ngày càng được phát triển rất nhanh và một trong những xu hướng thiết kế web hiện nay đó là thiết kế đơn giản hay còn gọi là tối giản nhất có thể. Thiết kế web tối giản bao gồm bố cục, nút, thanh điều hướng, thanh bên, màu sắc, kiểu chữ và nhiều thứ khác nữa...

Nhiều người sẽ cảm thấy thoải mái khi thiết kế một website đơn giản nhưng đôi khi có người lại cảm thấy nó khó nhìn vì quá đơn giản và không mấy đặc sắc. Thiết kế web tối giản thường được gọi là phong cách thiết kế phẳng hay thiết kế nguyên vật liệu.

Và hôm nay mình sẽ hướng dẫn các bạn làm một Button hoàn toàn bằng CSS & HTML cực kỳ đơn giản mà không kém phần đặc sắc.

Button CSS xu hướng thiết kế đơn giản trong năm 2019

Button sẽ có dạng như sau:

HTML

<a href="#" class="action-button shadow animate blue">Click xem thử</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;
}

Ở css này mình có 4 màu:  xanh da trời, đỏ, xanh lá cây và vàng
Các bạn thay blue ở HTML thành red, green, yellow tùy ý thích các bạn hoặc các bạn có thể tự viết thêm css màu khác riêng cho các bạn.

Click xem thửClick xem thửClick xem thửClick xem thử

Khá đơn giản để thực hiện. Chúc các bạn thành công!

Nếu cảm thấy thích màu mè hơn một chút các bạn có thể xem thêm các bài này:

• Tạo button hiệu ứng hover cực đẹp và tinh tế cho blogspot
• Tạo hiệu ứng button chuyên nghiệp hoàn toàn bằng css cho blogspot

Theme blogspot chia sẻ bởi : Share123 Blogger Templates
Design Blog Hồng
Tham gia cộng đồng Blogspot Việt Nam Cộng đồng Blogspot Việt Nam