Chuyên mục

Blogger
Máy tính

SHARE MẪU BUTTON CỰC ĐẸP CHO BLOGSPOT

Lời Mở Đầu

Chào mừng các bạn đã ghé thăm blog của mình .Blog mới thành lập gần đây tuy nhiên đã thu hút được khá nhiều sự chú ý của đọc giả.Hôm nay , mình bỗng nhận thấy là blog của mình chẳng có bài nào về thủ thuật blogspot cho nên mình quyết định hôm nay sẽ viết 1 bài về chủ đề này . Đó là bài share button download cực chất.


Các Bước Thực Hiện

Bắt Đầu Các bạn vô chủ đề →chỉnh sửa html sau đó các bạn tìm đến thẻ ]]></b:skin>  rồi thêm đoạn code phía dưới vô trước nó.
/* BUTTON NGUYENDIENBLOG */
.ndblog-button:link,
.ndblog-button:visited {position: relative;display: block;margin: 30px auto 0;padding: 14px 15px;color:#fff;font-size:14px;font-weight: bold;text-align: center;text-decoration: none;text-transform: uppercase;overflow: hidden;letter-spacing: .08em;border-radius: 0;text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2);-webkit-transition: all 1s ease;-moz-transition: all 1s ease;-o-transition: all 1s ease;transition: all 1s ease}
.ndblog-button:link:after,
.ndblog-button:visited:after {content: "";position: absolute;height: 0%;left: 50%;top: 50%;width: 150%;z-index: -1;-webkit-transition: all 0.75s ease 0s;-moz-transition: all 0.75s ease 0s;-o-transition: all 0.75s ease 0s;transition: all 0.75s ease 0s;}
.ndblog-button:link:hover,
.ndblog-button:visited:hover {color: #FFF;text-shadow: none;}
.ndblog-button:link:hover:after,
.ndblog-button:visited:hover:after {height: 450%;
}
.ndblog-button:link,
.ndblog-button:visited {position: relative;display: block;margin: 30px auto 0;padding: 12px ;width: 200px; ;color: #7f3787;font-size:14px;border-radius: 50 px;font-weight: bold;text-align: center;text-decoration: none;text-transform: uppercase;overflow: hidden;letter-spacing: .08em;text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2);-webkit-transition: all 1s ease;-moz-transition: all 1s ease;-o-transition: all 1s ease;transition: all 1s ease;}
.btn-ndb {border: 2px solid #7f3787;}
.btn-ndb:after {background: #7f3787;-moz-transform: translateX(-50%) translateY(-50%) rotate(-25deg);-ms-transform: translateX(-50%) translateY(-50%) rotate(-25deg);-webkit-transform: translateX(-50%) translateY(-50%) rotate(-25deg);transform: translateX(-50%) translateY(-50%) rotate(-25deg);}
/* END BUTTON NGUYENDIENBLOG */
Rồi Khi Sử Dụng Các Bạn Chỉ Dùng Đoạn Code Sau :
<a class="ndblog-button btn-ndb" href="https://www.facebook.com/">Sign up</a>

Chúc Các Bạn Thành Công
#CODEPEN
Nội dung chính
    Bài đăng mới hơn Bài đăng cũ hơn
    1. Thay vì demo bằng video ta nên thay nó bằng GIF

      Trả lờiXóa
    2. 1 cái button cả đóng người share :D

      Trả lờiXóa
    3. Ko có demo trực tiếp luôn e :s
      như thế mới làm cho ng đọc hình dung rỏ hơn về thủ thuật đó e ạ :s
      Đây là góp ý của a nhé :D

      Trả lờiXóa
      Trả lời
      1. Vâng cảm ơn a đã ghóp ý. Để mai e onl pc sửa lại

        Xóa
    4. Niềm đam mê button lại trỗi dậy :v

      Trả lờiXóa