Tạo button động bằng css đẹp mắt

Xem: 3471    Tải: 0   Thảo luận: 0   Mục: HTML-CSS template   Lĩnh vực: Khác

0 điểm   ( 6 đánh giá ) File đã được kiểm thử


Bài viết sẽ hướng dẫn bạn cách tạo button động đậy đẹp mắt hơn những button bình thường chỉ với vài css đơn giản

Khi thực hiện các project của mình, thì nút button chắc chắn không thể thiếu, có rất nhiều kiểu design button đẹp ở trên mạng cho các bạn tha hồ chọn, nhưng bạn đã bao giờ thấy button cũng động đậy như ảnh động chưa? Và bạn có biết cách để tạo ra nó? Vậy thì đừng bỏ lỡ bài viết này, tôi sẽ hướng dẫn bạn làm một button như vậy rất đơn giản với vài dòng css ngắn thôi.

Xem demo cái nhỉ. do mình lưu ảnh không phải ảnh động,cho nên chỉ nhìn thấy được bề mặt tĩnh, các bạn sau khi làm xong thì cùng chiêm ngưỡng mới thấy hết được sự “tinh túy” của nó như thế nào?  (hơi nhỏ nhé)
button đẹp

Bước 1: HTML

Mã HTML của chúng ta đơn giản lắm, chỉ có thế này thôi

<button class="btn">submit</button>
<button class="btn">submit</button>
<button class="btn">submit</button>
<button class="btn">submit</button>
<button class="btn">submit</button>
<button class="btn">submit</button>

Bước 2: Javascript

Để các bạn dễ hiểu,mình đưa mã javascript này lên làm bước 2, để không tí các bạn hỏi 1 số class trong css để làm gì nhé

(function() {
  $('.btn').on('click', function() {
    return $(this).toggleClass('loading');
  });

  $('.btn:odd').addClass('loading');

}).call(this);

Đoạn javascript trên rất đơn giản, chỉ là thêm 1 class có tên “loading” vào các button theo thứ tự mà thôi.

Bước 3: CSS

Đây mới là bước quan trọng nè, nhờ có css3 mà chúng ta mới có được khả năng này đó.
Đầu tiên là khai báo keyframe cho class loading. Những button nào có class này thì sẽ có hiệu ứng chuyển động

@keyframes loading {
  0% {
    background-position: 0 0;
  }
 
  100% {
    background-position: 80px 0;
  }
}
Tiếp theo là định dạng cho button, trên đây chỉ là những định dạng cơ bản thôi mà
.btn {
  display: inline-block;
  cursor: pointer;
  position: relative;
  width: 180px;
  height: 60px;
  font: bold 26px/60px Verdana, monospace, sans-serif;
  color: #fff;
  background-color: #3EA0FF;
  border: none;
  margin: 0 15px 15px 0;
  transition: text-shadow 0.3s ease;
  text-transform: uppercase;
  -webkit-box-shadow: 0 1px 2px #999999;
  -moz-box-shadow: 0 1px 2px #999999;
  box-shadow: 0 1px 2px #999999;
}
Khi hover chuột qua button thì sẽ có hiệu ứng, ta thêm 1 đoạn sau
.btn:hover,
.btn.loading {
  text-shadow: 0 1px 0 #333;
}

Đoạn quan trọng nhất,đó là thiết kế css cho class loading, thực ra đoạn này chỉ là định màu nền cho button đó thôi. Do trước đó chúng ta dùng keyframe để tạo hiệu ứng chuyển động cho button nên ở đây ta tự tạo màu cho background chuyển động mờ mờ

.btn.loading {
  background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(25%, rgba(255, 255, 255, 0.2)), color-stop(25%, transparent), color-stop(50%, transparent), color-stop(50%, rgba(255, 255, 255, 0.2)), color-stop(75%, rgba(255, 255, 255, 0.2)), color-stop(75%, transparent), color-stop(100%, transparent));
  background-image: -webkit-linear-gradient(left top, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
  background-image: -moz-linear-gradient(left top, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
  background-image: -o-linear-gradient(left top, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
  background-image: linear-gradient(left top, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
  background-size: 80px 80px;
  animation: loading 1.5s linear infinite;
}
Cuối cùng là thay đổi màu sắc các button nhìn cho đẹp cái chứ nhỉ
.btn:nth-child(2) {
  background-color: #FFBF41;
}
 
.btn:nth-child(3) {
  background-color: #EE8943;
}
 
.btn:nth-child(4) {
  background-color: #C02221;
}
 
.btn:nth-child(5) {
  background-color: #824167;
}
 
.btn:nth-child(6) {
  background-color: #249CA9;
}
Vậy là xong rồi đó, chúc các bạn có một project đẹp với button của mình

Tạo button động bằng css đẹp mắt

Tạo button động bằng css đẹp mắt Đăng ngày 15-09-2014  Bài viết sẽ hướng dẫn bạn cách tạo button động đậy đẹp mắt hơn những button bình thường chỉ với vài css đơn giản 5/10 3471

Thảo luận:

Để bình luận bạn phải đăng nhập thành viên.

File tương tự

Files cùng mục

 

File tải nhiều nhất

Megacode.vn - Thư viện mã nguồn chia sẻ, tải file cho cộng đồng
Copyright © 2013-2016. All rights reserved. Bản quyền thuộc VinaGon
Địa chỉ: Số 38 Hàng Bè, Hàng Bạc, Hoàn Kiếm, Hà Nội.
Văn phòng giao dịch: Phòng 28, Tầng 6, HH1A Linh Đàm, Hoàng Mai, Hà Nội
Email: info@vinagon.com | Website: www.vinagon.com | Điện thoại: (+844) 6. 32.979.36;
logo megacode

Megacode đã đăng ký với Bộ Công Thương
Thư viện mã nguồn mở lớn nhất Việt Nam.



Hỗ trợ khách hàng trên Megacode
Hỗ trợ kỹ thuật cho thành viên:
Tổng đài: (+844) 6. 32.979.36
Số di động (Hotline): 0969.091.265
Thời gian làm việc:
Sáng: 8h-12h; Chiều: 13h30-17h30
(Nghỉ chiều T7, CN và các ngày lễ, tết)
Chat với Megacode
https://www.facebook.com/megacodevn