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àngCá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:Theme blogspot chia sẻ bởi :
Share123 Blogger Templates Design
Blog HồngTham gia cộng đồng Blogspot Việt Nam
Cộng đồng Blogspot Việt Nam