Cách tạo nút nhấp nháy bằng hiệu ứng CSS3 Animation

Mình Thấy Bài Này Rất hay đã chia sẻ trên google mang về hướng dẫn cho các bạn nào chưa biết đến :D Hướng dẫn cách tạo nút nhấp nháy bằng hiệu ứng CSS3. Chúng Ta Bắt Đầu Luôn Nhé! 
Demo

Phần định nghĩa CSS cho nút

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

.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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

@-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

?

1	<a class="button">Click me!</a>

Xong! Cảm ơn bạn đã ghé thăm blog!