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{Ở css này mình có 4 màu: xanh da trời, đỏ, xanh lá cây và vàng
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;}
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 xemClick xemClick xemClick xem
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:
