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

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.

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

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âyvà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:
  1. Trả lời
    1. ko có gì bằng đúng người đúng thời điểm :))

      Xóa
    2. Đổi tông màu chính từ đỏ sang màu gì đó vừa mắt đi anh :)) em nhìn ít ra ngoài nên nhìn mấy cái chói chói là mỏi cả mắt @@

      Xóa
    3. gợi ý cho a một màu đi em :3

      Xóa
    4. https://i.imgur.com/YeBXIzr.png
      Theo quan điểm của 1 thằng tự kỉ ở nhà suốt như em thì màu như này là ổn

      Xóa
    5. Thấy thế nào ở color mới?

      Xóa
    6. Nhìn vip hơn rồi ấy anh, chỉnh font từ Open sans thành Roboto nữa thì chuyên nghiệp rồi !

      Xóa
  2. dùng khá nhẹ..nhưng e vẫn thích hơi màu mè chút

    Trả lờiXóa
    Trả lời
    1. ok nếu em thích màu mè hơn xíu có thể xem bài này hoặc là bài này sẽ hay hơn nhé!

      Xóa
  3. WOWWW đẹp nka anh =)) đơn giản mà thuần túy, tinh khiết.

    Trả lờiXóa
  4. đơn giản, nhẹ nhàng mà tinh tế. Em thích

    Trả lờiXóa
  5. Màu mới nhìn hài hòa đấy anh bạn ! :D

    Trả lờiXóa

Đăng ký bản tin

Đăng ký email để không bỏ lỡ những bài viết hay