Hôm nay, mình chia sẻ đến các bạn bộ code dùng để làm button bằng CSS3 đẹp tuyệt. Khi bạn đưa trỏ chuột vào button thì sẽ thấy hiệu ứng rất hay. Bộ code này đi kèm với FontAwesome, với bộ icon đa dạng và phong phú giúp bạn có thể tùy chỉnh icon tùy thích. Nào ta cùng xem và thử nghiệm bộ button tuyệt đẹp này nhé.
Bước 1: Đăng nhập Blogger Bố cục Chỉnh sửa HTML.
Bước 2: Thêm thư viện FontAwesome vào bằng cách chèn đoạn code này sau thẻ <head>
Lấy code tại đây.
Bước 3: Thêm đoạn CSS này sau thẻ <style>
a:active{position:relative;top:1px;left:1px} #all-button{text-align:center} #all-button a{padding:10px 20px;color:#fff;text-align:center;border:0;cursor:pointer;border-radius:3px;display:inline-block;font-weight:500;-webkit-box-shadow:inset 0 -4px rgba(0,0,0,0.15);box-shadow:inset 0 -4px rgba(0,0,0,0.15);color:#fff;max-width:220px;line-height:30px;font-size:16px;text-transform: uppercase;margin:10px} #all-button a:hover{-webkit-box-shadow:inset 0 -54px rgba(0,0,0,0.15);box-shadow:inset 0 -54px rgba(0,0,0,0.15);color:#fff} .demo-button:before{content:'\f1d9';font-family:fontawesome;display:inline-block;margin:0 8px 3px 0;vertical-align:middle} .download-button:before{content:'\f019';font-family:fontawesome;display:inline-block;margin:0 8px 3px 0;vertical-align:middle} .buy-button:before{content:'\f07a';font-family:fontawesome;display:inline-block;margin:0 8px 3px 0;vertical-align:middle} .blue{background:#3498db;} .green{background:#2ecc71} .red{background:#e74c3c} .orange{background:#e8930c} .purple{background:#9b59b6} .yellow{background:#FFD600} .pink{background:#F889EB} .grey{background:#bdc3c7} .turquoise{background:#1abc9c} .midnight{background:#2c3e50} .asbestos{background:#6d7b7c} .dark{background:#454545}
Bạn có thể thay thế chỗ content bằng mã của icon bạn thích trong thư viện FontAwesome: http://fontawesome.io/icons/
- Mình đã liệt kê sẵn 1 số mã màu đẹp hay dùng: blue, green, red, orange, purple, yellow, pink, grey, turquoise, midnight, asbestos, dark.
- Và thay thế tên demo-button, download-button, buy-button bằng tên mà bạn thích khi bạn thêm icon vào.
Bước 4: Thêm button cho Blog bằng code tại đây.
Vậy là xong! Chúc các bạn thành công!
Giống vkl đéo khác tí nào thua
Trả lờiXóaLà sao bạn ?
XóaCái ảnh í
XóaThêm tý Drop Shadow vào thôi bạn ạ :)) Mà cũng xin phép bạn cho mình mượn background của bạn luôn! Cảm ơn bạn nhiều !!
XóaBạn có thể thêm màu của bn mà đâu nhất thiết phải lấy màu của mình !!!
Trả lờiXóaCảm ơn bạn đã góp ý ! Mình sẽ sửa sau :)
XóaK có demo à
Trả lờiXóaĐã cập nhật rồi nha bác ! :v
XóaĐẹp nhỉ...chắc sài cái này luôn :v
Trả lờiXóaThanks bác nhiều :)
Xóa:)))
Xóahay lắm đệ :)))
XóaHihi vãi cả đệ :))
Xóa