Chủ Nhật, ngày 11 tháng 5 năm 2014
Trong quá trình thiết kế blog, blogspot, wordpress hay website việc tạo các nút (button) rất cần thiết và tùy vào mục đích sử dụng mà bạn có thể tạo ra những kiểu nút khác nhau. Có nhiều cách để bạn tạo hình dạng của các nút phục vụ cho việc thiết kế, có thể tạo bằng hình ảnh bằng các công cụ tạo ảnh hay bằng flash, dạng ảnh động... Trong bài viết này, mình sẽ hướng dẫn các bạn cách tạo Button download cho Blogger đẹp mắt bằng CSS3.
 |
| Tạo nút download, demo |
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/AVvXsEiBqyLC65S6VSbHHGQrt5lqOY4ghLrcKdo2mdFsXWh6kUBmF46K2m7zwdv0SVgvY4H7Bb_fLlc31zQkqfG1kICqZO0Vme6bLP-UiCk7RJbgAJpMpGelMmHcNBsfz7cuHL9I0NVhFmJ5NB5B/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/AVvXsEiBqyLC65S6VSbHHGQrt5lqOY4ghLrcKdo2mdFsXWh6kUBmF46K2m7zwdv0SVgvY4H7Bb_fLlc31zQkqfG1kICqZO0Vme6bLP-UiCk7RJbgAJpMpGelMmHcNBsfz7cuHL9I0NVhFmJ5NB5B/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBqyLC65S6VSbHHGQrt5lqOY4ghLrcKdo2mdFsXWh6kUBmF46K2m7zwdv0SVgvY4H7Bb_fLlc31zQkqfG1kICqZO0Vme6bLP-UiCk7RJbgAJpMpGelMmHcNBsfz7cuHL9I0NVhFmJ5NB5B/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/AVvXsEiBqyLC65S6VSbHHGQrt5lqOY4ghLrcKdo2mdFsXWh6kUBmF46K2m7zwdv0SVgvY4H7Bb_fLlc31zQkqfG1kICqZO0Vme6bLP-UiCk7RJbgAJpMpGelMmHcNBsfz7cuHL9I0NVhFmJ5NB5B/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBqyLC65S6VSbHHGQrt5lqOY4ghLrcKdo2mdFsXWh6kUBmF46K2m7zwdv0SVgvY4H7Bb_fLlc31zQkqfG1kICqZO0Vme6bLP-UiCk7RJbgAJpMpGelMmHcNBsfz7cuHL9I0NVhFmJ5NB5B/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/AVvXsEiBqyLC65S6VSbHHGQrt5lqOY4ghLrcKdo2mdFsXWh6kUBmF46K2m7zwdv0SVgvY4H7Bb_fLlc31zQkqfG1kICqZO0Vme6bLP-UiCk7RJbgAJpMpGelMmHcNBsfz7cuHL9I0NVhFmJ5NB5B/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBqyLC65S6VSbHHGQrt5lqOY4ghLrcKdo2mdFsXWh6kUBmF46K2m7zwdv0SVgvY4H7Bb_fLlc31zQkqfG1kICqZO0Vme6bLP-UiCk7RJbgAJpMpGelMmHcNBsfz7cuHL9I0NVhFmJ5NB5B/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/AVvXsEiBqyLC65S6VSbHHGQrt5lqOY4ghLrcKdo2mdFsXWh6kUBmF46K2m7zwdv0SVgvY4H7Bb_fLlc31zQkqfG1kICqZO0Vme6bLP-UiCk7RJbgAJpMpGelMmHcNBsfz7cuHL9I0NVhFmJ5NB5B/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBqyLC65S6VSbHHGQrt5lqOY4ghLrcKdo2mdFsXWh6kUBmF46K2m7zwdv0SVgvY4H7Bb_fLlc31zQkqfG1kICqZO0Vme6bLP-UiCk7RJbgAJpMpGelMmHcNBsfz7cuHL9I0NVhFmJ5NB5B/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/AVvXsEiBqyLC65S6VSbHHGQrt5lqOY4ghLrcKdo2mdFsXWh6kUBmF46K2m7zwdv0SVgvY4H7Bb_fLlc31zQkqfG1kICqZO0Vme6bLP-UiCk7RJbgAJpMpGelMmHcNBsfz7cuHL9I0NVhFmJ5NB5B/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBqyLC65S6VSbHHGQrt5lqOY4ghLrcKdo2mdFsXWh6kUBmF46K2m7zwdv0SVgvY4H7Bb_fLlc31zQkqfG1kICqZO0Vme6bLP-UiCk7RJbgAJpMpGelMmHcNBsfz7cuHL9I0NVhFmJ5NB5B/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/AVvXsEiBqyLC65S6VSbHHGQrt5lqOY4ghLrcKdo2mdFsXWh6kUBmF46K2m7zwdv0SVgvY4H7Bb_fLlc31zQkqfG1kICqZO0Vme6bLP-UiCk7RJbgAJpMpGelMmHcNBsfz7cuHL9I0NVhFmJ5NB5B/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBqyLC65S6VSbHHGQrt5lqOY4ghLrcKdo2mdFsXWh6kUBmF46K2m7zwdv0SVgvY4H7Bb_fLlc31zQkqfG1kICqZO0Vme6bLP-UiCk7RJbgAJpMpGelMmHcNBsfz7cuHL9I0NVhFmJ5NB5B/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/AVvXsEiBqyLC65S6VSbHHGQrt5lqOY4ghLrcKdo2mdFsXWh6kUBmF46K2m7zwdv0SVgvY4H7Bb_fLlc31zQkqfG1kICqZO0Vme6bLP-UiCk7RJbgAJpMpGelMmHcNBsfz7cuHL9I0NVhFmJ5NB5B/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBqyLC65S6VSbHHGQrt5lqOY4ghLrcKdo2mdFsXWh6kUBmF46K2m7zwdv0SVgvY4H7Bb_fLlc31zQkqfG1kICqZO0Vme6bLP-UiCk7RJbgAJpMpGelMmHcNBsfz7cuHL9I0NVhFmJ5NB5B/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/AVvXsEiBqyLC65S6VSbHHGQrt5lqOY4ghLrcKdo2mdFsXWh6kUBmF46K2m7zwdv0SVgvY4H7Bb_fLlc31zQkqfG1kICqZO0Vme6bLP-UiCk7RJbgAJpMpGelMmHcNBsfz7cuHL9I0NVhFmJ5NB5B/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBqyLC65S6VSbHHGQrt5lqOY4ghLrcKdo2mdFsXWh6kUBmF46K2m7zwdv0SVgvY4H7Bb_fLlc31zQkqfG1kICqZO0Vme6bLP-UiCk7RJbgAJpMpGelMmHcNBsfz7cuHL9I0NVhFmJ5NB5B/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/AVvXsEiBqyLC65S6VSbHHGQrt5lqOY4ghLrcKdo2mdFsXWh6kUBmF46K2m7zwdv0SVgvY4H7Bb_fLlc31zQkqfG1kICqZO0Vme6bLP-UiCk7RJbgAJpMpGelMmHcNBsfz7cuHL9I0NVhFmJ5NB5B/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBqyLC65S6VSbHHGQrt5lqOY4ghLrcKdo2mdFsXWh6kUBmF46K2m7zwdv0SVgvY4H7Bb_fLlc31zQkqfG1kICqZO0Vme6bLP-UiCk7RJbgAJpMpGelMmHcNBsfz7cuHL9I0NVhFmJ5NB5B/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/AVvXsEiBqyLC65S6VSbHHGQrt5lqOY4ghLrcKdo2mdFsXWh6kUBmF46K2m7zwdv0SVgvY4H7Bb_fLlc31zQkqfG1kICqZO0Vme6bLP-UiCk7RJbgAJpMpGelMmHcNBsfz7cuHL9I0NVhFmJ5NB5B/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBqyLC65S6VSbHHGQrt5lqOY4ghLrcKdo2mdFsXWh6kUBmF46K2m7zwdv0SVgvY4H7Bb_fLlc31zQkqfG1kICqZO0Vme6bLP-UiCk7RJbgAJpMpGelMmHcNBsfz7cuHL9I0NVhFmJ5NB5B/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/AVvXsEiBqyLC65S6VSbHHGQrt5lqOY4ghLrcKdo2mdFsXWh6kUBmF46K2m7zwdv0SVgvY4H7Bb_fLlc31zQkqfG1kICqZO0Vme6bLP-UiCk7RJbgAJpMpGelMmHcNBsfz7cuHL9I0NVhFmJ5NB5B/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBqyLC65S6VSbHHGQrt5lqOY4ghLrcKdo2mdFsXWh6kUBmF46K2m7zwdv0SVgvY4H7Bb_fLlc31zQkqfG1kICqZO0Vme6bLP-UiCk7RJbgAJpMpGelMmHcNBsfz7cuHL9I0NVhFmJ5NB5B/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/AVvXsEiBqyLC65S6VSbHHGQrt5lqOY4ghLrcKdo2mdFsXWh6kUBmF46K2m7zwdv0SVgvY4H7Bb_fLlc31zQkqfG1kICqZO0Vme6bLP-UiCk7RJbgAJpMpGelMmHcNBsfz7cuHL9I0NVhFmJ5NB5B/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBqyLC65S6VSbHHGQrt5lqOY4ghLrcKdo2mdFsXWh6kUBmF46K2m7zwdv0SVgvY4H7Bb_fLlc31zQkqfG1kICqZO0Vme6bLP-UiCk7RJbgAJpMpGelMmHcNBsfz7cuHL9I0NVhFmJ5NB5B/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/AVvXsEiBqyLC65S6VSbHHGQrt5lqOY4ghLrcKdo2mdFsXWh6kUBmF46K2m7zwdv0SVgvY4H7Bb_fLlc31zQkqfG1kICqZO0Vme6bLP-UiCk7RJbgAJpMpGelMmHcNBsfz7cuHL9I0NVhFmJ5NB5B/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBqyLC65S6VSbHHGQrt5lqOY4ghLrcKdo2mdFsXWh6kUBmF46K2m7zwdv0SVgvY4H7Bb_fLlc31zQkqfG1kICqZO0Vme6bLP-UiCk7RJbgAJpMpGelMmHcNBsfz7cuHL9I0NVhFmJ5NB5B/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/AVvXsEiBqyLC65S6VSbHHGQrt5lqOY4ghLrcKdo2mdFsXWh6kUBmF46K2m7zwdv0SVgvY4H7Bb_fLlc31zQkqfG1kICqZO0Vme6bLP-UiCk7RJbgAJpMpGelMmHcNBsfz7cuHL9I0NVhFmJ5NB5B/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBqyLC65S6VSbHHGQrt5lqOY4ghLrcKdo2mdFsXWh6kUBmF46K2m7zwdv0SVgvY4H7Bb_fLlc31zQkqfG1kICqZO0Vme6bLP-UiCk7RJbgAJpMpGelMmHcNBsfz7cuHL9I0NVhFmJ5NB5B/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/AVvXsEiBqyLC65S6VSbHHGQrt5lqOY4ghLrcKdo2mdFsXWh6kUBmF46K2m7zwdv0SVgvY4H7Bb_fLlc31zQkqfG1kICqZO0Vme6bLP-UiCk7RJbgAJpMpGelMmHcNBsfz7cuHL9I0NVhFmJ5NB5B/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBqyLC65S6VSbHHGQrt5lqOY4ghLrcKdo2mdFsXWh6kUBmF46K2m7zwdv0SVgvY4H7Bb_fLlc31zQkqfG1kICqZO0Vme6bLP-UiCk7RJbgAJpMpGelMmHcNBsfz7cuHL9I0NVhFmJ5NB5B/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/AVvXsEiBqyLC65S6VSbHHGQrt5lqOY4ghLrcKdo2mdFsXWh6kUBmF46K2m7zwdv0SVgvY4H7Bb_fLlc31zQkqfG1kICqZO0Vme6bLP-UiCk7RJbgAJpMpGelMmHcNBsfz7cuHL9I0NVhFmJ5NB5B/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBqyLC65S6VSbHHGQrt5lqOY4ghLrcKdo2mdFsXWh6kUBmF46K2m7zwdv0SVgvY4H7Bb_fLlc31zQkqfG1kICqZO0Vme6bLP-UiCk7RJbgAJpMpGelMmHcNBsfz7cuHL9I0NVhFmJ5NB5B/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))}
.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/AVvXsEiBqyLC65S6VSbHHGQrt5lqOY4ghLrcKdo2mdFsXWh6kUBmF46K2m7zwdv0SVgvY4H7Bb_fLlc31zQkqfG1kICqZO0Vme6bLP-UiCk7RJbgAJpMpGelMmHcNBsfz7cuHL9I0NVhFmJ5NB5B/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBqyLC65S6VSbHHGQrt5lqOY4ghLrcKdo2mdFsXWh6kUBmF46K2m7zwdv0SVgvY4H7Bb_fLlc31zQkqfG1kICqZO0Vme6bLP-UiCk7RJbgAJpMpGelMmHcNBsfz7cuHL9I0NVhFmJ5NB5B/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/AVvXsEiBqyLC65S6VSbHHGQrt5lqOY4ghLrcKdo2mdFsXWh6kUBmF46K2m7zwdv0SVgvY4H7Bb_fLlc31zQkqfG1kICqZO0Vme6bLP-UiCk7RJbgAJpMpGelMmHcNBsfz7cuHL9I0NVhFmJ5NB5B/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBqyLC65S6VSbHHGQrt5lqOY4ghLrcKdo2mdFsXWh6kUBmF46K2m7zwdv0SVgvY4H7Bb_fLlc31zQkqfG1kICqZO0Vme6bLP-UiCk7RJbgAJpMpGelMmHcNBsfz7cuHL9I0NVhFmJ5NB5B/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/AVvXsEiBqyLC65S6VSbHHGQrt5lqOY4ghLrcKdo2mdFsXWh6kUBmF46K2m7zwdv0SVgvY4H7Bb_fLlc31zQkqfG1kICqZO0Vme6bLP-UiCk7RJbgAJpMpGelMmHcNBsfz7cuHL9I0NVhFmJ5NB5B/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBqyLC65S6VSbHHGQrt5lqOY4ghLrcKdo2mdFsXWh6kUBmF46K2m7zwdv0SVgvY4H7Bb_fLlc31zQkqfG1kICqZO0Vme6bLP-UiCk7RJbgAJpMpGelMmHcNBsfz7cuHL9I0NVhFmJ5NB5B/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/AVvXsEiBqyLC65S6VSbHHGQrt5lqOY4ghLrcKdo2mdFsXWh6kUBmF46K2m7zwdv0SVgvY4H7Bb_fLlc31zQkqfG1kICqZO0Vme6bLP-UiCk7RJbgAJpMpGelMmHcNBsfz7cuHL9I0NVhFmJ5NB5B/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBqyLC65S6VSbHHGQrt5lqOY4ghLrcKdo2mdFsXWh6kUBmF46K2m7zwdv0SVgvY4H7Bb_fLlc31zQkqfG1kICqZO0Vme6bLP-UiCk7RJbgAJpMpGelMmHcNBsfz7cuHL9I0NVhFmJ5NB5B/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/AVvXsEiBqyLC65S6VSbHHGQrt5lqOY4ghLrcKdo2mdFsXWh6kUBmF46K2m7zwdv0SVgvY4H7Bb_fLlc31zQkqfG1kICqZO0Vme6bLP-UiCk7RJbgAJpMpGelMmHcNBsfz7cuHL9I0NVhFmJ5NB5B/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBqyLC65S6VSbHHGQrt5lqOY4ghLrcKdo2mdFsXWh6kUBmF46K2m7zwdv0SVgvY4H7Bb_fLlc31zQkqfG1kICqZO0Vme6bLP-UiCk7RJbgAJpMpGelMmHcNBsfz7cuHL9I0NVhFmJ5NB5B/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/AVvXsEiBqyLC65S6VSbHHGQrt5lqOY4ghLrcKdo2mdFsXWh6kUBmF46K2m7zwdv0SVgvY4H7Bb_fLlc31zQkqfG1kICqZO0Vme6bLP-UiCk7RJbgAJpMpGelMmHcNBsfz7cuHL9I0NVhFmJ5NB5B/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBqyLC65S6VSbHHGQrt5lqOY4ghLrcKdo2mdFsXWh6kUBmF46K2m7zwdv0SVgvY4H7Bb_fLlc31zQkqfG1kICqZO0Vme6bLP-UiCk7RJbgAJpMpGelMmHcNBsfz7cuHL9I0NVhFmJ5NB5B/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/AVvXsEiBqyLC65S6VSbHHGQrt5lqOY4ghLrcKdo2mdFsXWh6kUBmF46K2m7zwdv0SVgvY4H7Bb_fLlc31zQkqfG1kICqZO0Vme6bLP-UiCk7RJbgAJpMpGelMmHcNBsfz7cuHL9I0NVhFmJ5NB5B/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBqyLC65S6VSbHHGQrt5lqOY4ghLrcKdo2mdFsXWh6kUBmF46K2m7zwdv0SVgvY4H7Bb_fLlc31zQkqfG1kICqZO0Vme6bLP-UiCk7RJbgAJpMpGelMmHcNBsfz7cuHL9I0NVhFmJ5NB5B/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/AVvXsEiBqyLC65S6VSbHHGQrt5lqOY4ghLrcKdo2mdFsXWh6kUBmF46K2m7zwdv0SVgvY4H7Bb_fLlc31zQkqfG1kICqZO0Vme6bLP-UiCk7RJbgAJpMpGelMmHcNBsfz7cuHL9I0NVhFmJ5NB5B/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBqyLC65S6VSbHHGQrt5lqOY4ghLrcKdo2mdFsXWh6kUBmF46K2m7zwdv0SVgvY4H7Bb_fLlc31zQkqfG1kICqZO0Vme6bLP-UiCk7RJbgAJpMpGelMmHcNBsfz7cuHL9I0NVhFmJ5NB5B/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/AVvXsEiBqyLC65S6VSbHHGQrt5lqOY4ghLrcKdo2mdFsXWh6kUBmF46K2m7zwdv0SVgvY4H7Bb_fLlc31zQkqfG1kICqZO0Vme6bLP-UiCk7RJbgAJpMpGelMmHcNBsfz7cuHL9I0NVhFmJ5NB5B/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBqyLC65S6VSbHHGQrt5lqOY4ghLrcKdo2mdFsXWh6kUBmF46K2m7zwdv0SVgvY4H7Bb_fLlc31zQkqfG1kICqZO0Vme6bLP-UiCk7RJbgAJpMpGelMmHcNBsfz7cuHL9I0NVhFmJ5NB5B/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/AVvXsEiBqyLC65S6VSbHHGQrt5lqOY4ghLrcKdo2mdFsXWh6kUBmF46K2m7zwdv0SVgvY4H7Bb_fLlc31zQkqfG1kICqZO0Vme6bLP-UiCk7RJbgAJpMpGelMmHcNBsfz7cuHL9I0NVhFmJ5NB5B/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBqyLC65S6VSbHHGQrt5lqOY4ghLrcKdo2mdFsXWh6kUBmF46K2m7zwdv0SVgvY4H7Bb_fLlc31zQkqfG1kICqZO0Vme6bLP-UiCk7RJbgAJpMpGelMmHcNBsfz7cuHL9I0NVhFmJ5NB5B/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/AVvXsEiBqyLC65S6VSbHHGQrt5lqOY4ghLrcKdo2mdFsXWh6kUBmF46K2m7zwdv0SVgvY4H7Bb_fLlc31zQkqfG1kICqZO0Vme6bLP-UiCk7RJbgAJpMpGelMmHcNBsfz7cuHL9I0NVhFmJ5NB5B/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBqyLC65S6VSbHHGQrt5lqOY4ghLrcKdo2mdFsXWh6kUBmF46K2m7zwdv0SVgvY4H7Bb_fLlc31zQkqfG1kICqZO0Vme6bLP-UiCk7RJbgAJpMpGelMmHcNBsfz7cuHL9I0NVhFmJ5NB5B/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/AVvXsEiBqyLC65S6VSbHHGQrt5lqOY4ghLrcKdo2mdFsXWh6kUBmF46K2m7zwdv0SVgvY4H7Bb_fLlc31zQkqfG1kICqZO0Vme6bLP-UiCk7RJbgAJpMpGelMmHcNBsfz7cuHL9I0NVhFmJ5NB5B/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBqyLC65S6VSbHHGQrt5lqOY4ghLrcKdo2mdFsXWh6kUBmF46K2m7zwdv0SVgvY4H7Bb_fLlc31zQkqfG1kICqZO0Vme6bLP-UiCk7RJbgAJpMpGelMmHcNBsfz7cuHL9I0NVhFmJ5NB5B/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/AVvXsEiBqyLC65S6VSbHHGQrt5lqOY4ghLrcKdo2mdFsXWh6kUBmF46K2m7zwdv0SVgvY4H7Bb_fLlc31zQkqfG1kICqZO0Vme6bLP-UiCk7RJbgAJpMpGelMmHcNBsfz7cuHL9I0NVhFmJ5NB5B/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBqyLC65S6VSbHHGQrt5lqOY4ghLrcKdo2mdFsXWh6kUBmF46K2m7zwdv0SVgvY4H7Bb_fLlc31zQkqfG1kICqZO0Vme6bLP-UiCk7RJbgAJpMpGelMmHcNBsfz7cuHL9I0NVhFmJ5NB5B/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/AVvXsEiBqyLC65S6VSbHHGQrt5lqOY4ghLrcKdo2mdFsXWh6kUBmF46K2m7zwdv0SVgvY4H7Bb_fLlc31zQkqfG1kICqZO0Vme6bLP-UiCk7RJbgAJpMpGelMmHcNBsfz7cuHL9I0NVhFmJ5NB5B/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBqyLC65S6VSbHHGQrt5lqOY4ghLrcKdo2mdFsXWh6kUBmF46K2m7zwdv0SVgvY4H7Bb_fLlc31zQkqfG1kICqZO0Vme6bLP-UiCk7RJbgAJpMpGelMmHcNBsfz7cuHL9I0NVhFmJ5NB5B/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/AVvXsEiBqyLC65S6VSbHHGQrt5lqOY4ghLrcKdo2mdFsXWh6kUBmF46K2m7zwdv0SVgvY4H7Bb_fLlc31zQkqfG1kICqZO0Vme6bLP-UiCk7RJbgAJpMpGelMmHcNBsfz7cuHL9I0NVhFmJ5NB5B/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBqyLC65S6VSbHHGQrt5lqOY4ghLrcKdo2mdFsXWh6kUBmF46K2m7zwdv0SVgvY4H7Bb_fLlc31zQkqfG1kICqZO0Vme6bLP-UiCk7RJbgAJpMpGelMmHcNBsfz7cuHL9I0NVhFmJ5NB5B/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/AVvXsEiBqyLC65S6VSbHHGQrt5lqOY4ghLrcKdo2mdFsXWh6kUBmF46K2m7zwdv0SVgvY4H7Bb_fLlc31zQkqfG1kICqZO0Vme6bLP-UiCk7RJbgAJpMpGelMmHcNBsfz7cuHL9I0NVhFmJ5NB5B/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBqyLC65S6VSbHHGQrt5lqOY4ghLrcKdo2mdFsXWh6kUBmF46K2m7zwdv0SVgvY4H7Bb_fLlc31zQkqfG1kICqZO0Vme6bLP-UiCk7RJbgAJpMpGelMmHcNBsfz7cuHL9I0NVhFmJ5NB5B/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 chỉ cần tìm vị trí để chèn nút vào với code như bên dưới
<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>
<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>
Bạn hãy thay dấu # thành link website của bạn và tên màu xanh thành tên của nút bạn muốn tạo. Như vậy là đã hoàn tất bạn chỉ cần chèn nút vào vị trí mà mình mong muốn là xong.
Chúc bạn thành công!
Nguồn http://kieukien.blogspot.com/