» » Nút live demo & download đẹp với hiệu ứng hover CSS

Nút live demo & download đẹp với hiệu ứng hover CSS

Với hiệu ứng cực đẹp, phong cách cho nút download đẹp & nút live demo cho blog blogger của bạn. Hôm nay mình sẽ chia sẻ hai bộ sưu tập nút đẹp cho blog blogger của bạn, mà mình cũng đang sử dụng trong blog này.

Chúng ta phải làm khách ghé thăm xem một cái gì đó giống vẻ chuyên nghiệp hơn. Chúng ta luôn luôn muốn nắm bắt sự chú ý của khách ghé thăm qua vẻ đẹp và độc đáo blog của bạn. Vì vậy, nút này sẽ thực sự trông đẹp và tăng cường vẻ đẹp blog của bạn.
Các nút này không sử dụng bất kỳ kịch bản hoặc css về kiểu dáng bên ngoài của nó. Điều đó có nghĩa là nó sẽ không thực hiện bất kỳ tác dụng trên blog của thời gian tải của bạn.

Live Demo Download


Nút live demo & download đẹp với hiệu ứng hover CSS

Thêm nút trong bài viết mong muốn của bạn không phải là một công việc khó khăn. Thực hiện theo các bước dưới đây.

Bước 1: Đăng nhập => EDIT HTML.

Bước 2: Ấn Ctrl + F tìm thẻ ]]></b:skin> và dán code sau trước nó


 /*---download button by blogspotyard.com css start---*/
 .button {-moz-border-radius:5px 5px 5px 5px;-webkit-border-radius:5px 5px 5px 5px;border-radius:5px 5px 5px 5px;-moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);-webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);background:url("#") repeat-x scroll 0 0 #252424;border-bottom:1px solid rgba(0, 0, 0, 0.25);color:#FFFFFF !important;cursor:pointer;font-weight:bold;line-height:1;overflow:visible;font-size:17px;padding:8px 19px 9px;position:relative;text-decoration:none;text-shadow:0 -1px 1px rgba(0, 0, 0, 0.25);width:auto;}.by-demobutton {background-color:#222222;text-align:center;width:150px;}.by-demobutton:hover {background-color:#00A0EE;}.by-downloadbutton {background-color:#bcf50b;text-align:center;width:150px;}.by-downloadbutton:hover {background-color:#00AC00;}.button:hover {-moz-box-shadow:0 1px 11px rgba(0, 0, 0, 0.45);-webkit-box-shadow:0 1px 11px rgba(0, 0, 0, 0.45);box-shadow:0 1px 11px rgba(0, 0, 0, 0.45);}
 /*---download button by blogspotyard.com css end---*/

Bước 3: Lưu template lại.

Làm thế nào để thêm nút vào trong bài viết:

Bước 1: Trong bài viết ấn vào tab HTML

Bước 2: Paste hai đoạn code bên dưới vào

Button Download
<a class="by-downloadbutton button" href="YOUR DOWNLOAD LINK HERE" 
rel="nofollow" style="float: right;" target="_blank"><span 
style="display: inline-block;">Download</span></a>

Button Live Demo
<a class="by-demobutton button" href="YOUR DEMO LINK HERE" 
rel="nofollow" style="float: right;" target="_blank"><span 
style="display: inline-block;">Live Demo</span></a>

Bước 3: Cuối cùng đăng bài viết blog của bạn và xem trước trực tiếp.

Tùy chỉnh:


  • Thay thế phần màu đỏ với các liên kết của bạn, mà bạn muốn che phủ với các nút.
  • Thay thế phần mẫu xanh màu đánh dấu văn bản xanh với những gì bạn muốn hiển thị trên nút.
  • Thay thế phần màu hồng màu tùy chọn đánh dấu bằng trái, phải và trung tâm; trong đó phía bạn muốn nổi nút.
Đi lên