Khái quát
Trong lập trình web có rất nhiều cách tạo ra hiệu ứng Animation khi click button với HTML và CSS. SẼ có những cách từ khó đến dễ mà từ đó quết định đến việc có cần sử dụng Javascript hay không.
Ở bài này mình xin chia sẽ với mọi người một hiệu ứng tạo ra Animation Click button chỉ sử dụng HTML và CSS dựa vào kiến thức lớp chồng lớp ở đời thật để áp dụng vào design thông qua tô màu Background và bóng box-shadow.
Triển khai xây dựng Hiệu Ứng Animation Click Button CSS
Code HTML
Code CSS
body{
min-height: 100vh;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
}
button{
padding: 5px 20px;
border: 1px solid #b21065;
border-radius: 20px;
background-image:
linear-gradient(to bottom, #fff9, transparent 50% 90%, #f5cbbc99), /* lớp trên cùng làm hiệu ứng phủ sáng */
repeating-linear-gradient(60deg,#bc058255 0 10px, transparent 10px 20px), /* lLớp này tạo ra một hiệu ứng đường kẻ lặp đi lặp lại */
linear-gradient(to bottom, #EF08A6, #ee6c8f); /* lớp dưới cùng làm màu nền */
color: #fff;
font-family: monospace;
font-weight: bold;
text-shadow: 0 1px 0 #efb7de;
box-shadow:
0 10px 0 #0005,
0 5px 0 #BD1360,
0 4px 0 7px #fff,
0 0 30px 10px #e260ae;
transition: 0.5s;
}
button:active{
/* lThay đổi các thông số thứ 2 ( khỏng cách xuống phía dưới về 0
và dịch chuyển button xuống bên dươi 5px tạo ra hiệu ứng nhấp chuột giống thật) */
box-shadow:
0 0px 0 #0005,
0 0px 0 #BD1360,
0 0px 0 7px #fff,
0 0 30px 30px #e260ae;
transform: translateY(5px);
}
Dựa vào việc chồng nhiều lớp màu sắc lên với nhau ta sẽ tạo ra những hiệu ứng vô cùng sóng động mô phỏng không gian, ánh sáng ngoài đời thật trong CSS.
Các lớp phủ màu sắc trong box-shadow hay background-image được quy định rằng lớp nào được viết trước sẽ được chồng lên trên, từ đó tạo ra các dãi màu chồng lên nhau.
Thuộc tính linear-gradient dùng để tạo ra hiệu ứng chuyển màu, tham số đầu tiên chính là hướng chuyển màu, có thể là tên hướng (top, left, right, bottom) hoặc thông số góc, các tham số còn lại chính là các màu sắc sẽ được dùng cho hiệu ứng chuyển màu.
Thuộc tính repeating-linear-gradient củng được dùng để tạo ra hiệu ứng chuyển màu như linear-gradient tuy nhiên bổ xung thêm đó là nó sẽ dựa vào các thông số được khai báo trong bộ màu để liên tục lặp lại dải màu này.
Thộc tính box-shadow dùng để tạo ra hiệu ứng đổ bóng cho phần tử.
Vậy là chỉ với vài dòng code CSS ngắn ta đã có thể tạo ra hiệu ứng Animation Click Button tuyệt đẹp.
Hình ảnh kết quả:
