vncongnghe - Việc tạo nút (button) trong quá trình thiết kế web/blog là đều 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 có thể hình thành nên 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... Bài viết hôm nay mình cũng chia sẻ cho các bạn cách tạo nút không cần phần mềm hỗ trợ để bạn thiết kế nút mà chỉ bằng CSS3. Với bài viết này bạn sẽ có thể tạo nên các nút và khi rê chuột bạn sẽ thấy các bọt nước chuyển động rất đẹp mắt và nhẹ nhàng hơn việc bạn sử dụng hình ảnh tạo nút rất nhiều.
» Bắt đầu thủ thuật
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/AVvXsEhLz_ffLzE_iVrzZPPiKPBnwD30Z1im-OehJW8xup2bn9hlOst9jcqa8_Y3LI7Dl8cul-SF4Eb1jBfDRvotb1n8t5rkdXVEeGVUwVrUSpiPBsLeG1jg26cQJmnZst_oRTymShyphenhyphenLpXUnzxTy/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/AVvXsEhLz_ffLzE_iVrzZPPiKPBnwD30Z1im-OehJW8xup2bn9hlOst9jcqa8_Y3LI7Dl8cul-SF4Eb1jBfDRvotb1n8t5rkdXVEeGVUwVrUSpiPBsLeG1jg26cQJmnZst_oRTymShyphenhyphenLpXUnzxTy/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLz_ffLzE_iVrzZPPiKPBnwD30Z1im-OehJW8xup2bn9hlOst9jcqa8_Y3LI7Dl8cul-SF4Eb1jBfDRvotb1n8t5rkdXVEeGVUwVrUSpiPBsLeG1jg26cQJmnZst_oRTymShyphenhyphenLpXUnzxTy/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/AVvXsEhLz_ffLzE_iVrzZPPiKPBnwD30Z1im-OehJW8xup2bn9hlOst9jcqa8_Y3LI7Dl8cul-SF4Eb1jBfDRvotb1n8t5rkdXVEeGVUwVrUSpiPBsLeG1jg26cQJmnZst_oRTymShyphenhyphenLpXUnzxTy/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLz_ffLzE_iVrzZPPiKPBnwD30Z1im-OehJW8xup2bn9hlOst9jcqa8_Y3LI7Dl8cul-SF4Eb1jBfDRvotb1n8t5rkdXVEeGVUwVrUSpiPBsLeG1jg26cQJmnZst_oRTymShyphenhyphenLpXUnzxTy/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/AVvXsEhLz_ffLzE_iVrzZPPiKPBnwD30Z1im-OehJW8xup2bn9hlOst9jcqa8_Y3LI7Dl8cul-SF4Eb1jBfDRvotb1n8t5rkdXVEeGVUwVrUSpiPBsLeG1jg26cQJmnZst_oRTymShyphenhyphenLpXUnzxTy/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLz_ffLzE_iVrzZPPiKPBnwD30Z1im-OehJW8xup2bn9hlOst9jcqa8_Y3LI7Dl8cul-SF4Eb1jBfDRvotb1n8t5rkdXVEeGVUwVrUSpiPBsLeG1jg26cQJmnZst_oRTymShyphenhyphenLpXUnzxTy/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/AVvXsEhLz_ffLzE_iVrzZPPiKPBnwD30Z1im-OehJW8xup2bn9hlOst9jcqa8_Y3LI7Dl8cul-SF4Eb1jBfDRvotb1n8t5rkdXVEeGVUwVrUSpiPBsLeG1jg26cQJmnZst_oRTymShyphenhyphenLpXUnzxTy/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLz_ffLzE_iVrzZPPiKPBnwD30Z1im-OehJW8xup2bn9hlOst9jcqa8_Y3LI7Dl8cul-SF4Eb1jBfDRvotb1n8t5rkdXVEeGVUwVrUSpiPBsLeG1jg26cQJmnZst_oRTymShyphenhyphenLpXUnzxTy/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/AVvXsEhLz_ffLzE_iVrzZPPiKPBnwD30Z1im-OehJW8xup2bn9hlOst9jcqa8_Y3LI7Dl8cul-SF4Eb1jBfDRvotb1n8t5rkdXVEeGVUwVrUSpiPBsLeG1jg26cQJmnZst_oRTymShyphenhyphenLpXUnzxTy/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLz_ffLzE_iVrzZPPiKPBnwD30Z1im-OehJW8xup2bn9hlOst9jcqa8_Y3LI7Dl8cul-SF4Eb1jBfDRvotb1n8t5rkdXVEeGVUwVrUSpiPBsLeG1jg26cQJmnZst_oRTymShyphenhyphenLpXUnzxTy/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/AVvXsEhLz_ffLzE_iVrzZPPiKPBnwD30Z1im-OehJW8xup2bn9hlOst9jcqa8_Y3LI7Dl8cul-SF4Eb1jBfDRvotb1n8t5rkdXVEeGVUwVrUSpiPBsLeG1jg26cQJmnZst_oRTymShyphenhyphenLpXUnzxTy/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLz_ffLzE_iVrzZPPiKPBnwD30Z1im-OehJW8xup2bn9hlOst9jcqa8_Y3LI7Dl8cul-SF4Eb1jBfDRvotb1n8t5rkdXVEeGVUwVrUSpiPBsLeG1jg26cQJmnZst_oRTymShyphenhyphenLpXUnzxTy/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/AVvXsEhLz_ffLzE_iVrzZPPiKPBnwD30Z1im-OehJW8xup2bn9hlOst9jcqa8_Y3LI7Dl8cul-SF4Eb1jBfDRvotb1n8t5rkdXVEeGVUwVrUSpiPBsLeG1jg26cQJmnZst_oRTymShyphenhyphenLpXUnzxTy/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLz_ffLzE_iVrzZPPiKPBnwD30Z1im-OehJW8xup2bn9hlOst9jcqa8_Y3LI7Dl8cul-SF4Eb1jBfDRvotb1n8t5rkdXVEeGVUwVrUSpiPBsLeG1jg26cQJmnZst_oRTymShyphenhyphenLpXUnzxTy/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/AVvXsEhLz_ffLzE_iVrzZPPiKPBnwD30Z1im-OehJW8xup2bn9hlOst9jcqa8_Y3LI7Dl8cul-SF4Eb1jBfDRvotb1n8t5rkdXVEeGVUwVrUSpiPBsLeG1jg26cQJmnZst_oRTymShyphenhyphenLpXUnzxTy/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLz_ffLzE_iVrzZPPiKPBnwD30Z1im-OehJW8xup2bn9hlOst9jcqa8_Y3LI7Dl8cul-SF4Eb1jBfDRvotb1n8t5rkdXVEeGVUwVrUSpiPBsLeG1jg26cQJmnZst_oRTymShyphenhyphenLpXUnzxTy/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/AVvXsEhLz_ffLzE_iVrzZPPiKPBnwD30Z1im-OehJW8xup2bn9hlOst9jcqa8_Y3LI7Dl8cul-SF4Eb1jBfDRvotb1n8t5rkdXVEeGVUwVrUSpiPBsLeG1jg26cQJmnZst_oRTymShyphenhyphenLpXUnzxTy/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLz_ffLzE_iVrzZPPiKPBnwD30Z1im-OehJW8xup2bn9hlOst9jcqa8_Y3LI7Dl8cul-SF4Eb1jBfDRvotb1n8t5rkdXVEeGVUwVrUSpiPBsLeG1jg26cQJmnZst_oRTymShyphenhyphenLpXUnzxTy/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/AVvXsEhLz_ffLzE_iVrzZPPiKPBnwD30Z1im-OehJW8xup2bn9hlOst9jcqa8_Y3LI7Dl8cul-SF4Eb1jBfDRvotb1n8t5rkdXVEeGVUwVrUSpiPBsLeG1jg26cQJmnZst_oRTymShyphenhyphenLpXUnzxTy/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLz_ffLzE_iVrzZPPiKPBnwD30Z1im-OehJW8xup2bn9hlOst9jcqa8_Y3LI7Dl8cul-SF4Eb1jBfDRvotb1n8t5rkdXVEeGVUwVrUSpiPBsLeG1jg26cQJmnZst_oRTymShyphenhyphenLpXUnzxTy/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/AVvXsEhLz_ffLzE_iVrzZPPiKPBnwD30Z1im-OehJW8xup2bn9hlOst9jcqa8_Y3LI7Dl8cul-SF4Eb1jBfDRvotb1n8t5rkdXVEeGVUwVrUSpiPBsLeG1jg26cQJmnZst_oRTymShyphenhyphenLpXUnzxTy/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLz_ffLzE_iVrzZPPiKPBnwD30Z1im-OehJW8xup2bn9hlOst9jcqa8_Y3LI7Dl8cul-SF4Eb1jBfDRvotb1n8t5rkdXVEeGVUwVrUSpiPBsLeG1jg26cQJmnZst_oRTymShyphenhyphenLpXUnzxTy/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/AVvXsEhLz_ffLzE_iVrzZPPiKPBnwD30Z1im-OehJW8xup2bn9hlOst9jcqa8_Y3LI7Dl8cul-SF4Eb1jBfDRvotb1n8t5rkdXVEeGVUwVrUSpiPBsLeG1jg26cQJmnZst_oRTymShyphenhyphenLpXUnzxTy/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLz_ffLzE_iVrzZPPiKPBnwD30Z1im-OehJW8xup2bn9hlOst9jcqa8_Y3LI7Dl8cul-SF4Eb1jBfDRvotb1n8t5rkdXVEeGVUwVrUSpiPBsLeG1jg26cQJmnZst_oRTymShyphenhyphenLpXUnzxTy/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/AVvXsEhLz_ffLzE_iVrzZPPiKPBnwD30Z1im-OehJW8xup2bn9hlOst9jcqa8_Y3LI7Dl8cul-SF4Eb1jBfDRvotb1n8t5rkdXVEeGVUwVrUSpiPBsLeG1jg26cQJmnZst_oRTymShyphenhyphenLpXUnzxTy/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLz_ffLzE_iVrzZPPiKPBnwD30Z1im-OehJW8xup2bn9hlOst9jcqa8_Y3LI7Dl8cul-SF4Eb1jBfDRvotb1n8t5rkdXVEeGVUwVrUSpiPBsLeG1jg26cQJmnZst_oRTymShyphenhyphenLpXUnzxTy/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/AVvXsEhLz_ffLzE_iVrzZPPiKPBnwD30Z1im-OehJW8xup2bn9hlOst9jcqa8_Y3LI7Dl8cul-SF4Eb1jBfDRvotb1n8t5rkdXVEeGVUwVrUSpiPBsLeG1jg26cQJmnZst_oRTymShyphenhyphenLpXUnzxTy/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLz_ffLzE_iVrzZPPiKPBnwD30Z1im-OehJW8xup2bn9hlOst9jcqa8_Y3LI7Dl8cul-SF4Eb1jBfDRvotb1n8t5rkdXVEeGVUwVrUSpiPBsLeG1jg26cQJmnZst_oRTymShyphenhyphenLpXUnzxTy/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/AVvXsEhLz_ffLzE_iVrzZPPiKPBnwD30Z1im-OehJW8xup2bn9hlOst9jcqa8_Y3LI7Dl8cul-SF4Eb1jBfDRvotb1n8t5rkdXVEeGVUwVrUSpiPBsLeG1jg26cQJmnZst_oRTymShyphenhyphenLpXUnzxTy/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLz_ffLzE_iVrzZPPiKPBnwD30Z1im-OehJW8xup2bn9hlOst9jcqa8_Y3LI7Dl8cul-SF4Eb1jBfDRvotb1n8t5rkdXVEeGVUwVrUSpiPBsLeG1jg26cQJmnZst_oRTymShyphenhyphenLpXUnzxTy/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/AVvXsEhLz_ffLzE_iVrzZPPiKPBnwD30Z1im-OehJW8xup2bn9hlOst9jcqa8_Y3LI7Dl8cul-SF4Eb1jBfDRvotb1n8t5rkdXVEeGVUwVrUSpiPBsLeG1jg26cQJmnZst_oRTymShyphenhyphenLpXUnzxTy/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLz_ffLzE_iVrzZPPiKPBnwD30Z1im-OehJW8xup2bn9hlOst9jcqa8_Y3LI7Dl8cul-SF4Eb1jBfDRvotb1n8t5rkdXVEeGVUwVrUSpiPBsLeG1jg26cQJmnZst_oRTymShyphenhyphenLpXUnzxTy/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/AVvXsEhLz_ffLzE_iVrzZPPiKPBnwD30Z1im-OehJW8xup2bn9hlOst9jcqa8_Y3LI7Dl8cul-SF4Eb1jBfDRvotb1n8t5rkdXVEeGVUwVrUSpiPBsLeG1jg26cQJmnZst_oRTymShyphenhyphenLpXUnzxTy/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLz_ffLzE_iVrzZPPiKPBnwD30Z1im-OehJW8xup2bn9hlOst9jcqa8_Y3LI7Dl8cul-SF4Eb1jBfDRvotb1n8t5rkdXVEeGVUwVrUSpiPBsLeG1jg26cQJmnZst_oRTymShyphenhyphenLpXUnzxTy/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/AVvXsEhLz_ffLzE_iVrzZPPiKPBnwD30Z1im-OehJW8xup2bn9hlOst9jcqa8_Y3LI7Dl8cul-SF4Eb1jBfDRvotb1n8t5rkdXVEeGVUwVrUSpiPBsLeG1jg26cQJmnZst_oRTymShyphenhyphenLpXUnzxTy/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLz_ffLzE_iVrzZPPiKPBnwD30Z1im-OehJW8xup2bn9hlOst9jcqa8_Y3LI7Dl8cul-SF4Eb1jBfDRvotb1n8t5rkdXVEeGVUwVrUSpiPBsLeG1jg26cQJmnZst_oRTymShyphenhyphenLpXUnzxTy/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/AVvXsEhLz_ffLzE_iVrzZPPiKPBnwD30Z1im-OehJW8xup2bn9hlOst9jcqa8_Y3LI7Dl8cul-SF4Eb1jBfDRvotb1n8t5rkdXVEeGVUwVrUSpiPBsLeG1jg26cQJmnZst_oRTymShyphenhyphenLpXUnzxTy/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLz_ffLzE_iVrzZPPiKPBnwD30Z1im-OehJW8xup2bn9hlOst9jcqa8_Y3LI7Dl8cul-SF4Eb1jBfDRvotb1n8t5rkdXVEeGVUwVrUSpiPBsLeG1jg26cQJmnZst_oRTymShyphenhyphenLpXUnzxTy/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/AVvXsEhLz_ffLzE_iVrzZPPiKPBnwD30Z1im-OehJW8xup2bn9hlOst9jcqa8_Y3LI7Dl8cul-SF4Eb1jBfDRvotb1n8t5rkdXVEeGVUwVrUSpiPBsLeG1jg26cQJmnZst_oRTymShyphenhyphenLpXUnzxTy/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLz_ffLzE_iVrzZPPiKPBnwD30Z1im-OehJW8xup2bn9hlOst9jcqa8_Y3LI7Dl8cul-SF4Eb1jBfDRvotb1n8t5rkdXVEeGVUwVrUSpiPBsLeG1jg26cQJmnZst_oRTymShyphenhyphenLpXUnzxTy/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/AVvXsEhLz_ffLzE_iVrzZPPiKPBnwD30Z1im-OehJW8xup2bn9hlOst9jcqa8_Y3LI7Dl8cul-SF4Eb1jBfDRvotb1n8t5rkdXVEeGVUwVrUSpiPBsLeG1jg26cQJmnZst_oRTymShyphenhyphenLpXUnzxTy/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLz_ffLzE_iVrzZPPiKPBnwD30Z1im-OehJW8xup2bn9hlOst9jcqa8_Y3LI7Dl8cul-SF4Eb1jBfDRvotb1n8t5rkdXVEeGVUwVrUSpiPBsLeG1jg26cQJmnZst_oRTymShyphenhyphenLpXUnzxTy/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/AVvXsEhLz_ffLzE_iVrzZPPiKPBnwD30Z1im-OehJW8xup2bn9hlOst9jcqa8_Y3LI7Dl8cul-SF4Eb1jBfDRvotb1n8t5rkdXVEeGVUwVrUSpiPBsLeG1jg26cQJmnZst_oRTymShyphenhyphenLpXUnzxTy/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLz_ffLzE_iVrzZPPiKPBnwD30Z1im-OehJW8xup2bn9hlOst9jcqa8_Y3LI7Dl8cul-SF4Eb1jBfDRvotb1n8t5rkdXVEeGVUwVrUSpiPBsLeG1jg26cQJmnZst_oRTymShyphenhyphenLpXUnzxTy/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/AVvXsEhLz_ffLzE_iVrzZPPiKPBnwD30Z1im-OehJW8xup2bn9hlOst9jcqa8_Y3LI7Dl8cul-SF4Eb1jBfDRvotb1n8t5rkdXVEeGVUwVrUSpiPBsLeG1jg26cQJmnZst_oRTymShyphenhyphenLpXUnzxTy/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLz_ffLzE_iVrzZPPiKPBnwD30Z1im-OehJW8xup2bn9hlOst9jcqa8_Y3LI7Dl8cul-SF4Eb1jBfDRvotb1n8t5rkdXVEeGVUwVrUSpiPBsLeG1jg26cQJmnZst_oRTymShyphenhyphenLpXUnzxTy/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/AVvXsEhLz_ffLzE_iVrzZPPiKPBnwD30Z1im-OehJW8xup2bn9hlOst9jcqa8_Y3LI7Dl8cul-SF4Eb1jBfDRvotb1n8t5rkdXVEeGVUwVrUSpiPBsLeG1jg26cQJmnZst_oRTymShyphenhyphenLpXUnzxTy/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLz_ffLzE_iVrzZPPiKPBnwD30Z1im-OehJW8xup2bn9hlOst9jcqa8_Y3LI7Dl8cul-SF4Eb1jBfDRvotb1n8t5rkdXVEeGVUwVrUSpiPBsLeG1jg26cQJmnZst_oRTymShyphenhyphenLpXUnzxTy/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/AVvXsEhLz_ffLzE_iVrzZPPiKPBnwD30Z1im-OehJW8xup2bn9hlOst9jcqa8_Y3LI7Dl8cul-SF4Eb1jBfDRvotb1n8t5rkdXVEeGVUwVrUSpiPBsLeG1jg26cQJmnZst_oRTymShyphenhyphenLpXUnzxTy/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLz_ffLzE_iVrzZPPiKPBnwD30Z1im-OehJW8xup2bn9hlOst9jcqa8_Y3LI7Dl8cul-SF4Eb1jBfDRvotb1n8t5rkdXVEeGVUwVrUSpiPBsLeG1jg26cQJmnZst_oRTymShyphenhyphenLpXUnzxTy/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/AVvXsEhLz_ffLzE_iVrzZPPiKPBnwD30Z1im-OehJW8xup2bn9hlOst9jcqa8_Y3LI7Dl8cul-SF4Eb1jBfDRvotb1n8t5rkdXVEeGVUwVrUSpiPBsLeG1jg26cQJmnZst_oRTymShyphenhyphenLpXUnzxTy/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLz_ffLzE_iVrzZPPiKPBnwD30Z1im-OehJW8xup2bn9hlOst9jcqa8_Y3LI7Dl8cul-SF4Eb1jBfDRvotb1n8t5rkdXVEeGVUwVrUSpiPBsLeG1jg26cQJmnZst_oRTymShyphenhyphenLpXUnzxTy/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/AVvXsEhLz_ffLzE_iVrzZPPiKPBnwD30Z1im-OehJW8xup2bn9hlOst9jcqa8_Y3LI7Dl8cul-SF4Eb1jBfDRvotb1n8t5rkdXVEeGVUwVrUSpiPBsLeG1jg26cQJmnZst_oRTymShyphenhyphenLpXUnzxTy/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLz_ffLzE_iVrzZPPiKPBnwD30Z1im-OehJW8xup2bn9hlOst9jcqa8_Y3LI7Dl8cul-SF4Eb1jBfDRvotb1n8t5rkdXVEeGVUwVrUSpiPBsLeG1jg26cQJmnZst_oRTymShyphenhyphenLpXUnzxTy/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/AVvXsEhLz_ffLzE_iVrzZPPiKPBnwD30Z1im-OehJW8xup2bn9hlOst9jcqa8_Y3LI7Dl8cul-SF4Eb1jBfDRvotb1n8t5rkdXVEeGVUwVrUSpiPBsLeG1jg26cQJmnZst_oRTymShyphenhyphenLpXUnzxTy/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLz_ffLzE_iVrzZPPiKPBnwD30Z1im-OehJW8xup2bn9hlOst9jcqa8_Y3LI7Dl8cul-SF4Eb1jBfDRvotb1n8t5rkdXVEeGVUwVrUSpiPBsLeG1jg26cQJmnZst_oRTymShyphenhyphenLpXUnzxTy/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/AVvXsEhLz_ffLzE_iVrzZPPiKPBnwD30Z1im-OehJW8xup2bn9hlOst9jcqa8_Y3LI7Dl8cul-SF4Eb1jBfDRvotb1n8t5rkdXVEeGVUwVrUSpiPBsLeG1jg26cQJmnZst_oRTymShyphenhyphenLpXUnzxTy/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLz_ffLzE_iVrzZPPiKPBnwD30Z1im-OehJW8xup2bn9hlOst9jcqa8_Y3LI7Dl8cul-SF4Eb1jBfDRvotb1n8t5rkdXVEeGVUwVrUSpiPBsLeG1jg26cQJmnZst_oRTymShyphenhyphenLpXUnzxTy/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/AVvXsEhLz_ffLzE_iVrzZPPiKPBnwD30Z1im-OehJW8xup2bn9hlOst9jcqa8_Y3LI7Dl8cul-SF4Eb1jBfDRvotb1n8t5rkdXVEeGVUwVrUSpiPBsLeG1jg26cQJmnZst_oRTymShyphenhyphenLpXUnzxTy/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLz_ffLzE_iVrzZPPiKPBnwD30Z1im-OehJW8xup2bn9hlOst9jcqa8_Y3LI7Dl8cul-SF4Eb1jBfDRvotb1n8t5rkdXVEeGVUwVrUSpiPBsLeG1jg26cQJmnZst_oRTymShyphenhyphenLpXUnzxTy/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/AVvXsEhLz_ffLzE_iVrzZPPiKPBnwD30Z1im-OehJW8xup2bn9hlOst9jcqa8_Y3LI7Dl8cul-SF4Eb1jBfDRvotb1n8t5rkdXVEeGVUwVrUSpiPBsLeG1jg26cQJmnZst_oRTymShyphenhyphenLpXUnzxTy/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLz_ffLzE_iVrzZPPiKPBnwD30Z1im-OehJW8xup2bn9hlOst9jcqa8_Y3LI7Dl8cul-SF4Eb1jBfDRvotb1n8t5rkdXVEeGVUwVrUSpiPBsLeG1jg26cQJmnZst_oRTymShyphenhyphenLpXUnzxTy/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/AVvXsEhLz_ffLzE_iVrzZPPiKPBnwD30Z1im-OehJW8xup2bn9hlOst9jcqa8_Y3LI7Dl8cul-SF4Eb1jBfDRvotb1n8t5rkdXVEeGVUwVrUSpiPBsLeG1jg26cQJmnZst_oRTymShyphenhyphenLpXUnzxTy/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLz_ffLzE_iVrzZPPiKPBnwD30Z1im-OehJW8xup2bn9hlOst9jcqa8_Y3LI7Dl8cul-SF4Eb1jBfDRvotb1n8t5rkdXVEeGVUwVrUSpiPBsLeG1jg26cQJmnZst_oRTymShyphenhyphenLpXUnzxTy/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 href="#" class="button big blue">Big Button</a>
<a href="#" class="button big green">Big Button</a>
<a href="#" class="button big orange">Big Button</a>
<a href="#" class="button big gray">Big Button</a>
<a href="#" class="button blue medium">Medium Button</a>
<a href="#" class="button green medium">Medium Button</a>
<a href="#" class="button orange medium">Medium Button</a>
<a href="#" class="button gray medium">Medium Button</a>
<a href="#" class="button small blue">Small Button</a>
<a href="#" class="button small green">Small Button</a>
<a href="#" class="button small blue rounded">Rounded</a>
<a href="#" class="button small orange">Small Button</a>
<a href="#" class="button small gray">Small Button</a>
<a href="#" class="button small green rounded">Rounded</a>
<a href="#" class="button big green">Big Button</a>
<a href="#" class="button big orange">Big Button</a>
<a href="#" class="button big gray">Big Button</a>
<a href="#" class="button blue medium">Medium Button</a>
<a href="#" class="button green medium">Medium Button</a>
<a href="#" class="button orange medium">Medium Button</a>
<a href="#" class="button gray medium">Medium Button</a>
<a href="#" class="button small blue">Small Button</a>
<a href="#" class="button small green">Small Button</a>
<a href="#" class="button small blue rounded">Rounded</a>
<a href="#" class="button small orange">Small Button</a>
<a href="#" class="button small gray">Small Button</a>
<a href="#" class="button small green rounded">Rounded</a>
Bạn hãy thay dấu # thành link và tên màu tím 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!
Theo traidatmui.com
In bài này
Đặt làm trang chủ