Tạo Button Download đẹp từ CSS3 cho blogspot

Tạo Button Download đẹp từ CSS3 cho blogspot

Thủ thuật này sẽ giúp bạn tạo một nút download đẹp cho blog. Điểm đặc biệt là nó không hề sử dụng hình ảnh nào, tất cả đều được viết từ ngôn ngữ thuần CSS3 khiến cho blog của bạn tải nhanh hơn so với những nút tải về sử dụng hình ảnh. Đồng thời nó được kết hợp với hiệu ứng hiện thông tin của link liên kết khi bạn dê chuột lên nút tải về. Bạn có thể xem demo ở hình ảnh bên cạnh hoặc link kết bên dưới

Thủ thuật này đặc biệt thích hợp với những blog chuyên viết về phần mềm và chia sẻ các link liên kết, Áp dụng nó sẽ khiến blog của bạn dặc biệt hơn, nó tạo cho bạn có một phong cách riêng so với các blog/web khác.

1. Đăng nhập vào tài khoản Blogger
2. Vào phần Mẫu (Template)
3. Chọn chỉnh sửa HTML (Edit HTML)  
4. Chèn tiếp code CSS bên dưới vào trước thẻ ]]></b:skin> 

.button{font:15px Calibri,Arial,sans-serif; text-shadow:1px 1px 0 rgba(255,255,255,0.4); text-decoration:none !important;white-space:nowrap;display:inline-block;vertical-align:baseline;position:relative;cursor:pointer;padding:10px 20px;background-repeat:no-repeat; background-position:bottom left;background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPn4ZtikhIR_k6DODJFwML22i4Mii8cUvfrahjzWUxFZDeCtCI7KXkBeQHR4rCBdVxyo5jx0_zBWmEfF8B-A8Bo21jBrb8PwtgGmUhUEyrYlGDNeFN6_ooGLVeosmbDL2CQ6rfci7PDsyl/s500/Bubble-Buttons.png'); background-position:bottom left,top right,0 0,0 0;background-clip:border-box; -moz-border-radius:8px;-webkit-border-radius:8px;border-radius:8px; -moz-box-shadow:0 0 1px #fff inset;-webkit-box-shadow:0 0 1px #fff inset;box-shadow:0 0 1px #fff inset; -webkit-transition:background-position 1s;-moz-transition:background-position 1s;transition:background-position 1s}
.button:hover{ background-position:top left;background-position:top left,bottom right,0 0,0 0}
.button:active{ bottom:-1px}
.button.big{font-size:30px} /*Cỡ chữ nút lớn*/
.button.medium{font-size:18px} /*Cỡ chữ nút trung bình*/
.button.small{font-size:13px} /*Cỡ chữ nút nhỏ*/
.button.rounded{-moz-border-radius:4em;-webkit-border-radius:4em;border-radius:4em}
.blue.button{color:#0f4b6d !important;border:1px solid #84acc3 !important; background-color:#48b5f2; background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPn4ZtikhIR_k6DODJFwML22i4Mii8cUvfrahjzWUxFZDeCtCI7KXkBeQHR4rCBdVxyo5jx0_zBWmEfF8B-A8Bo21jBrb8PwtgGmUhUEyrYlGDNeFN6_ooGLVeosmbDL2CQ6rfci7PDsyl/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPn4ZtikhIR_k6DODJFwML22i4Mii8cUvfrahjzWUxFZDeCtCI7KXkBeQHR4rCBdVxyo5jx0_zBWmEfF8B-A8Bo21jBrb8PwtgGmUhUEyrYlGDNeFN6_ooGLVeosmbDL2CQ6rfci7PDsyl/s500/Bubble-Buttons.png'),-moz-radial-gradient( center bottom,circle,rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px),-moz-linear-gradient(#4fbbf7,#3faeeb);background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPn4ZtikhIR_k6DODJFwML22i4Mii8cUvfrahjzWUxFZDeCtCI7KXkBeQHR4rCBdVxyo5jx0_zBWmEfF8B-A8Bo21jBrb8PwtgGmUhUEyrYlGDNeFN6_ooGLVeosmbDL2CQ6rfci7PDsyl/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPn4ZtikhIR_k6DODJFwML22i4Mii8cUvfrahjzWUxFZDeCtCI7KXkBeQHR4rCBdVxyo5jx0_zBWmEfF8B-A8Bo21jBrb8PwtgGmUhUEyrYlGDNeFN6_ooGLVeosmbDL2CQ6rfci7PDsyl/s500/Bubble-Buttons.png'),-webkit-gradient( radial,50% 100%,0,50% 100%,100,from(rgba(89,208,244,1)),to(rgba(89,208,244,0))),-webkit-gradient(linear,0% 0%,0% 100%,from(#4fbbf7),to(#3faeeb))}
.blue.button:hover{background-color:#63c7fe;background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPn4ZtikhIR_k6DODJFwML22i4Mii8cUvfrahjzWUxFZDeCtCI7KXkBeQHR4rCBdVxyo5jx0_zBWmEfF8B-A8Bo21jBrb8PwtgGmUhUEyrYlGDNeFN6_ooGLVeosmbDL2CQ6rfci7PDsyl/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPn4ZtikhIR_k6DODJFwML22i4Mii8cUvfrahjzWUxFZDeCtCI7KXkBeQHR4rCBdVxyo5jx0_zBWmEfF8B-A8Bo21jBrb8PwtgGmUhUEyrYlGDNeFN6_ooGLVeosmbDL2CQ6rfci7PDsyl/s500/Bubble-Buttons.png'),-moz-radial-gradient( center bottom,circle,rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px),-moz-linear-gradient(#63c7fe,#58bef7);background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPn4ZtikhIR_k6DODJFwML22i4Mii8cUvfrahjzWUxFZDeCtCI7KXkBeQHR4rCBdVxyo5jx0_zBWmEfF8B-A8Bo21jBrb8PwtgGmUhUEyrYlGDNeFN6_ooGLVeosmbDL2CQ6rfci7PDsyl/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPn4ZtikhIR_k6DODJFwML22i4Mii8cUvfrahjzWUxFZDeCtCI7KXkBeQHR4rCBdVxyo5jx0_zBWmEfF8B-A8Bo21jBrb8PwtgGmUhUEyrYlGDNeFN6_ooGLVeosmbDL2CQ6rfci7PDsyl/s500/Bubble-Buttons.png'),-webkit-gradient( radial,50% 100%,0,50% 100%,100,from(rgba(109,217,250,1)),to(rgba(109,217,250,0))),-webkit-gradient(linear,0% 0%,0% 100%,from(#63c7fe),to(#58bef7))}
.green.button{color:#345903 !important;border:1px solid #96a37b !important;background-color:#79be1e;background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPn4ZtikhIR_k6DODJFwML22i4Mii8cUvfrahjzWUxFZDeCtCI7KXkBeQHR4rCBdVxyo5jx0_zBWmEfF8B-A8Bo21jBrb8PwtgGmUhUEyrYlGDNeFN6_ooGLVeosmbDL2CQ6rfci7PDsyl/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPn4ZtikhIR_k6DODJFwML22i4Mii8cUvfrahjzWUxFZDeCtCI7KXkBeQHR4rCBdVxyo5jx0_zBWmEfF8B-A8Bo21jBrb8PwtgGmUhUEyrYlGDNeFN6_ooGLVeosmbDL2CQ6rfci7PDsyl/s500/Bubble-Buttons.png'),-moz-radial-gradient(center bottom,circle,rgba(162,211,30,1) 0,rgba(162,211,30,0) 100px),-moz-linear-gradient(#82cc27,#74b317);background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPn4ZtikhIR_k6DODJFwML22i4Mii8cUvfrahjzWUxFZDeCtCI7KXkBeQHR4rCBdVxyo5jx0_zBWmEfF8B-A8Bo21jBrb8PwtgGmUhUEyrYlGDNeFN6_ooGLVeosmbDL2CQ6rfci7PDsyl/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPn4ZtikhIR_k6DODJFwML22i4Mii8cUvfrahjzWUxFZDeCtCI7KXkBeQHR4rCBdVxyo5jx0_zBWmEfF8B-A8Bo21jBrb8PwtgGmUhUEyrYlGDNeFN6_ooGLVeosmbDL2CQ6rfci7PDsyl/s500/Bubble-Buttons.png'),-webkit-gradient(radial,50% 100%,0,50% 100%,100,from(rgba(162,211,30,1)),to(rgba(162,211,30,0))),-webkit-gradient(linear,0% 0%,0% 100%,from(#82cc27),to(#74b317))}
.green.button:hover{background-color:#89d228;background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPn4ZtikhIR_k6DODJFwML22i4Mii8cUvfrahjzWUxFZDeCtCI7KXkBeQHR4rCBdVxyo5jx0_zBWmEfF8B-A8Bo21jBrb8PwtgGmUhUEyrYlGDNeFN6_ooGLVeosmbDL2CQ6rfci7PDsyl/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPn4ZtikhIR_k6DODJFwML22i4Mii8cUvfrahjzWUxFZDeCtCI7KXkBeQHR4rCBdVxyo5jx0_zBWmEfF8B-A8Bo21jBrb8PwtgGmUhUEyrYlGDNeFN6_ooGLVeosmbDL2CQ6rfci7PDsyl/s500/Bubble-Buttons.png'),-moz-radial-gradient(center bottom,circle,rgba(183,229,45,1) 0,rgba(183,229,45,0) 100px),-moz-linear-gradient(#90de31,#7fc01e);background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPn4ZtikhIR_k6DODJFwML22i4Mii8cUvfrahjzWUxFZDeCtCI7KXkBeQHR4rCBdVxyo5jx0_zBWmEfF8B-A8Bo21jBrb8PwtgGmUhUEyrYlGDNeFN6_ooGLVeosmbDL2CQ6rfci7PDsyl/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPn4ZtikhIR_k6DODJFwML22i4Mii8cUvfrahjzWUxFZDeCtCI7KXkBeQHR4rCBdVxyo5jx0_zBWmEfF8B-A8Bo21jBrb8PwtgGmUhUEyrYlGDNeFN6_ooGLVeosmbDL2CQ6rfci7PDsyl/s500/Bubble-Buttons.png'),-webkit-gradient(radial,50% 100%,0,50% 100%,100,from(rgba(183,229,45,1)),to(rgba(183,229,45,0))),-webkit-gradient(linear,0% 0%,0% 100%,from(#90de31),to(#7fc01e))}
.orange.button{color:#693e0a !important;border:1px solid #bea280 !important;background-color:#e38d27;background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPn4ZtikhIR_k6DODJFwML22i4Mii8cUvfrahjzWUxFZDeCtCI7KXkBeQHR4rCBdVxyo5jx0_zBWmEfF8B-A8Bo21jBrb8PwtgGmUhUEyrYlGDNeFN6_ooGLVeosmbDL2CQ6rfci7PDsyl/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPn4ZtikhIR_k6DODJFwML22i4Mii8cUvfrahjzWUxFZDeCtCI7KXkBeQHR4rCBdVxyo5jx0_zBWmEfF8B-A8Bo21jBrb8PwtgGmUhUEyrYlGDNeFN6_ooGLVeosmbDL2CQ6rfci7PDsyl/s500/Bubble-Buttons.png'),-moz-radial-gradient(center bottom,circle,rgba(232,189,45,1) 0,rgba(232,189,45,0) 100px),-moz-linear-gradient(#f1982f,#d4821f);background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPn4ZtikhIR_k6DODJFwML22i4Mii8cUvfrahjzWUxFZDeCtCI7KXkBeQHR4rCBdVxyo5jx0_zBWmEfF8B-A8Bo21jBrb8PwtgGmUhUEyrYlGDNeFN6_ooGLVeosmbDL2CQ6rfci7PDsyl/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPn4ZtikhIR_k6DODJFwML22i4Mii8cUvfrahjzWUxFZDeCtCI7KXkBeQHR4rCBdVxyo5jx0_zBWmEfF8B-A8Bo21jBrb8PwtgGmUhUEyrYlGDNeFN6_ooGLVeosmbDL2CQ6rfci7PDsyl/s500/Bubble-Buttons.png'),-webkit-gradient(radial,50% 100%,0,50% 100%,100,from(rgba(232,189,45,1)),to(rgba(232,189,45,0))),-webkit-gradient(linear,0% 0%,0% 100%,from(#f1982f),to(#d4821f))}
.orange.button:hover{background-color:#ec9732;background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPn4ZtikhIR_k6DODJFwML22i4Mii8cUvfrahjzWUxFZDeCtCI7KXkBeQHR4rCBdVxyo5jx0_zBWmEfF8B-A8Bo21jBrb8PwtgGmUhUEyrYlGDNeFN6_ooGLVeosmbDL2CQ6rfci7PDsyl/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPn4ZtikhIR_k6DODJFwML22i4Mii8cUvfrahjzWUxFZDeCtCI7KXkBeQHR4rCBdVxyo5jx0_zBWmEfF8B-A8Bo21jBrb8PwtgGmUhUEyrYlGDNeFN6_ooGLVeosmbDL2CQ6rfci7PDsyl/s500/Bubble-Buttons.png'),-moz-radial-gradient(center bottom,circle,rgba(241,192,52,1) 0,rgba(241,192,52,0) 100px),-moz-linear-gradient(#f9a746,#e18f2b);background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPn4ZtikhIR_k6DODJFwML22i4Mii8cUvfrahjzWUxFZDeCtCI7KXkBeQHR4rCBdVxyo5jx0_zBWmEfF8B-A8Bo21jBrb8PwtgGmUhUEyrYlGDNeFN6_ooGLVeosmbDL2CQ6rfci7PDsyl/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPn4ZtikhIR_k6DODJFwML22i4Mii8cUvfrahjzWUxFZDeCtCI7KXkBeQHR4rCBdVxyo5jx0_zBWmEfF8B-A8Bo21jBrb8PwtgGmUhUEyrYlGDNeFN6_ooGLVeosmbDL2CQ6rfci7PDsyl/s500/Bubble-Buttons.png'),-webkit-gradient(radial,50% 100%,0,50% 100%,100,from(rgba(241,192,52,1)),to(rgba(241,192,52,0))),-webkit-gradient(linear,0% 0%,0% 100%,from(#f9a746),to(#e18f2b))}
.gray.button{color:#525252 !important;border:1px solid #a5a5a5 !important;background-color:#a9adb1;background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPn4ZtikhIR_k6DODJFwML22i4Mii8cUvfrahjzWUxFZDeCtCI7KXkBeQHR4rCBdVxyo5jx0_zBWmEfF8B-A8Bo21jBrb8PwtgGmUhUEyrYlGDNeFN6_ooGLVeosmbDL2CQ6rfci7PDsyl/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPn4ZtikhIR_k6DODJFwML22i4Mii8cUvfrahjzWUxFZDeCtCI7KXkBeQHR4rCBdVxyo5jx0_zBWmEfF8B-A8Bo21jBrb8PwtgGmUhUEyrYlGDNeFN6_ooGLVeosmbDL2CQ6rfci7PDsyl/s500/Bubble-Buttons.png'),-moz-radial-gradient(center bottom,circle,rgba(197,199,202,1) 0,rgba(197,199,202,0) 100px),-moz-linear-gradient(#c5c7ca,#92989c);background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPn4ZtikhIR_k6DODJFwML22i4Mii8cUvfrahjzWUxFZDeCtCI7KXkBeQHR4rCBdVxyo5jx0_zBWmEfF8B-A8Bo21jBrb8PwtgGmUhUEyrYlGDNeFN6_ooGLVeosmbDL2CQ6rfci7PDsyl/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPn4ZtikhIR_k6DODJFwML22i4Mii8cUvfrahjzWUxFZDeCtCI7KXkBeQHR4rCBdVxyo5jx0_zBWmEfF8B-A8Bo21jBrb8PwtgGmUhUEyrYlGDNeFN6_ooGLVeosmbDL2CQ6rfci7PDsyl/s500/Bubble-Buttons.png'),-webkit-gradient(radial,50% 100%,0,50% 100%,100,from(rgba(197,199,202,1)),to(rgba(197,199,202,0))),-webkit-gradient(linear,0% 0%,0% 100%,from(#c5c7ca),to(#92989c))}
.gray.button:hover{background-color:#b6bbc0;background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPn4ZtikhIR_k6DODJFwML22i4Mii8cUvfrahjzWUxFZDeCtCI7KXkBeQHR4rCBdVxyo5jx0_zBWmEfF8B-A8Bo21jBrb8PwtgGmUhUEyrYlGDNeFN6_ooGLVeosmbDL2CQ6rfci7PDsyl/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPn4ZtikhIR_k6DODJFwML22i4Mii8cUvfrahjzWUxFZDeCtCI7KXkBeQHR4rCBdVxyo5jx0_zBWmEfF8B-A8Bo21jBrb8PwtgGmUhUEyrYlGDNeFN6_ooGLVeosmbDL2CQ6rfci7PDsyl/s500/Bubble-Buttons.png'),-moz-radial-gradient(center bottom,circle,rgba(202,205,208,1) 0,rgba(202,205,208,0) 100px),-moz-linear-gradient(#d1d3d6,#9fa5a9);background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPn4ZtikhIR_k6DODJFwML22i4Mii8cUvfrahjzWUxFZDeCtCI7KXkBeQHR4rCBdVxyo5jx0_zBWmEfF8B-A8Bo21jBrb8PwtgGmUhUEyrYlGDNeFN6_ooGLVeosmbDL2CQ6rfci7PDsyl/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPn4ZtikhIR_k6DODJFwML22i4Mii8cUvfrahjzWUxFZDeCtCI7KXkBeQHR4rCBdVxyo5jx0_zBWmEfF8B-A8Bo21jBrb8PwtgGmUhUEyrYlGDNeFN6_ooGLVeosmbDL2CQ6rfci7PDsyl/s500/Bubble-Buttons.png'),-webkit-gradient(radial,50% 100%,0,50% 100%,100,from(rgba(202,205,208,1)),to(rgba(202,205,208,0))),-webkit-gradient(linear,0% 0%,0% 100%,from(#d1d3d6),to(#9fa5a9))}

5. Và bây giờ bạn viết bài chuyển qua thẻ HTML chèn đoạn code phù hợp bên dưới và thay # và Big Button sao cho phù hợp

<a class="button big blue" href="#">Big Button</a>
<a class="button big green" href="#">Big Button</a>
<a class="button big orange" href="#">Big Button</a>
<a class="button big gray" href="#">Big Button</a>
<a class="button blue medium" href="#">Medium Button</a>
<a class="button green medium" href="#">Medium Button</a>
<a class="button orange medium" href="#">Medium Button</a>
<a class="button gray medium" href="#">Medium Button</a>
<a class="button small blue" href="#">Small Button</a>
<a class="button small green" href="#">Small Button</a>
<a class="button small blue rounded" href="#">Rounded</a>
<a class="button small orange" href="#">Small Button</a>
<a class="button small gray" href="#">Small Button</a>

<a class="button small green rounded" href="#">Rounded</a>

Chúc các bạn thành công