Thứ Năm, 22 tháng 9, 2016

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

Tác giả: Unknown Đăng lúc: 07:05

Nhãn

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

.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

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

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