Hello, lại là mình đây. Hôm nay mình sẽ chia sẻ cho các bạn một mẫu button khá đẹp mà mình vừa nghĩ ra. Các bạn có thể sử dụng nó một cách hợp lý theo ý muốn của mình nhé ! Không linh tinh luyên thuyên nữa thì chúng ta bắt đầu xem bài viết thôi..

các bước thực hiện :

Các bạn chỉ cần copy đoạn HTML + CSS dưới đây và paste vào nơi cần hiển thị là được. Nhớ là chỉnh sửa lại cho đúng với nội dung cần hiển thị nhé !


html :

<div style="text-align: center;">
<a class="button-prince" href="https://prince-tips.blogspot.com" target="_blank">Demo</a> 

css : 

.button-prince{-webkit-transition: all .3s ease-in-out;-o-transition: all .3s ease-in-out;transition: all .3s ease-in-out;padding:6px 30px;border-radius: 20px 5px;margin:0 5px;color: #fff;font: 700 20px Roboto Condensed;background: linear-gradient(-45deg, #E9D227, #E73C7E, #7C40E1, #FF438F, #db3d3d);background-size: 400% 400%; -webkit-animation: Gradient 5s ease infinite; -moz-animation: Gradient 5s ease infinite;animation: Gradient 5s ease infinite;;-webkit-transition: .3s;}
@-webkit-keyframes Gradient {0% {background-position: 0% 50%}
 50% {background-position: 100% 50%}100% {background-position: 0% 50%}} 
@-moz-keyframes Gradient {0% {background-position: 0% 50%}
 50% {background-position: 100% 50%}100% {background-position: 0% 50%}}
@keyframes Gradient {0% {background-position: 0% 50%} 50% {background-position: 100% 50%} 100% {background-position: 0% 50%}} 
.button-prince:hover,.button-prince:focus{box-shadow: 2px 2px 10px rgba(119, 119, 119, 0.5);border-radius: 5px 20px;} 

lời kết : 

Xong, không còn gì để nói thì chúng các bạn thành công và đừng quên theo dõi Blog mỗi ngày để cập nhật những bài viết hay và bổ ích nhé !
- 40 bình luận
CHUYÊN MỤC

TẤT CẢ BÌNH LUẬN (40)

  1. Woa !!! Lâu ngày ghé thăm mấy a 2 :3 mấy a 2 phát triển blog quá :(

    ReplyDelete
  2. Uôi !!! Button lần đầu tiên thấy, Button đẹp lắm luôn, màu tinh tế, kèm theo Thumbnail đẹp, bài viết chất lượng <3 Cho 9 điểm :3

    ReplyDelete
  3. lâu rồi chưa thấy bạn qua chơi bên nhà mình :V

    ReplyDelete
    Replies
    1. Ngày nào cũng sang :v cơ mà k có gì để cmt cả :3

      Delete
    2. =)) hết biết viết gì nữa rồi :V

      Delete
    3. Viết cách wuayhand không bị bắn ra đi :v

      Delete
  4. đẹp quá hú hú em xài luôn button này :D

    ReplyDelete
  5. Thay lại domain giúp e nhé :v https://www.tinhgetterblog.ooo/

    ReplyDelete
  6. Replies
    1. Tìm .comments iframe và xóa height: 234px để khung cmt gọn đẹp hơn nhé :D

      Delete
    2. Méo thấy khác đi chỗ nào :v ( Hmm.. )

      Delete
  7. bạn đổi liên kết cho mình thành http://www.nguyendienblog.ooo/ nha! xin lỗi vì sự bất tiện

    ReplyDelete
  8. Mong bạn đặt liên kết cho blog của mình
    Link blog đây https://trickertranha2003.blogspot.com/
    Hóng đặt,mình đặt bạn rồi nhé

    ReplyDelete

Một số lưu ý khi bình luận

Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước (xem nội quy).

Không nói lời thiếu văn hóa, không quảng cáo thông qua khung bình luận.

Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời.

Để bình luận một đoạn code, hãy mã hóa code trước nhé!