Tất cả bài viết | CSS3
Cách tạo nút nhấp nháy bằng hiệu ứng CSS3 Animation
Hướng dẫn cách tạo nút nhấp nháy bằng hiệu ứng CSS3
Phần định nghĩa CSS cho nút
.button { background-color: #004A7F; -webkit-border-radius: 10px; border-radius: 10px; border: none; color: #FFFFFF; cursor: pointer; display: inline-block; font-family: Arial; font-size: 20px; padding: 5px 10px; text-align: center; text-decoration: none; }
Phần định nghĩa hiệu ứng cho nút bằng CSS3 Animation
@-webkit-keyframes glowing { 0% { background-color: #004A7F; -webkit-box-shadow: 0 0 3px #004A7F; } 50% { background-color: #0094FF; -webkit-box-shadow: 0 0 10px #0094FF; } 100% { background-color: #004A7F; -webkit-box-shadow: 0 0 3px #004A7F; } } @-moz-keyframes glowing { 0% { background-color: #004A7F; -moz-box-shadow: 0 0 3px #004A7F; } 50% { background-color: #0094FF; -moz-box-shadow: 0 0 10px #0094FF; } 100% { background-color: #004A7F; -moz-box-shadow: 0 0 3px #004A7F; } } @-o-keyframes glowing { 0% { background-color: #004A7F; box-shadow: 0 0 3px #004A7F; } 50% { background-color: #0094FF; box-shadow: 0 0 10px #0094FF; } 100% { background-color: #004A7F; box-shadow: 0 0 3px #004A7F; } } @keyframes glowing { 0% { background-color: #004A7F; box-shadow: 0 0 3px #004A7F; } 50% { background-color: #0094FF; box-shadow: 0 0 10px #0094FF; } 100% { background-color: #004A7F; box-shadow: 0 0 3px #004A7F; } } .button { -webkit-animation: glowing 1500ms infinite; -moz-animation: glowing 1500ms infinite; -o-animation: glowing 1500ms infinite; animation: glowing 1500ms infinite; }
Phần định nghĩa HTML cho nút
Click me!
CSS3 Xem (31817) Học thiết kế web giá rẻ