HTML - CSS - Javascript

Tạo một nút button tự phát sáng trên website chỉ cần dùng CSS 3

Trong bài này chúng ta sẽ cùng dùng CSS3 để thiết kế một button tự phát sáng kèm theo phóng to thu nhỏ thật hấp dẫn không kém gì flash

Dạng button này chúng ta có thể dùng cho các thuộc tính HTML dạng button, input và đường link thẻ <a>.

Trước tiên, chúng ta tạo phần html dạng button:

<a class="button" href="#">Click ngay!</a>
<button type="submit" class="button">Click ngay!</button>
Tiếp theo, chúng ta cùng style hiển thị cho button vừa tạo:

.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;
}
Trong phần tiếp này, chúng ta sẽ dùng các thuộc tính keyframes và animation của CSS 3 để tạo hiệu ứng cho button:
1. Bắt đầu của keyframes là 0%: bắt đầu với màu của nền là màu xanh blue và màu xanh blue là shadow xung quanh nút đó với khoảng cách blur là 3 pixels.
2. Tiếp theo là 50% keyframes: định nghĩa nền là màu xanh sáng ( light blue ) và màu xanh sáng cũng là màu shadow bao xung quanh nút button với hiệu ứng blur dài 10px.
3. Keyframes đạt 100% định nghĩa lại giống y hệt lúc 0%

Sau đây là CSS style:

@-webkit-keyframes glowing { //Cho chrome, safari
  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 { //Cho firefox
  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 { //Cho Opera
  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 { //Mặc định
  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 { // Hiệu ứng phóng lớn cho nút
  -webkit-animation: glowing 1500ms infinite;
  -moz-animation: glowing 1500ms infinite;
  -o-animation: glowing 1500ms infinite;
  animation: glowing 1500ms infinite;
}
Bây giờ các bạn đã có một button vừa phát sáng vừa phóng to thu nhỏ tự động rất hấp dẫn.

Xem demo tại đây: Demo button phát sáng phóng to thu nhỏ tự động với css 3

Link download code mẫu: Tại đây
Mật khẩu giải nén: baobinh.net


css 3 html html5
  • Posted by
  • 2015-08-27 21:27:09