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