"Tạo nút với hiệu ứng bọt nước bằng CSS3 cho Blogspot"

Traidatmui.com – 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.


Tạo nút với hiệu ứng bọt nước bằng CSS3 cho Blogspot

» 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://lh5.googleusercontent.com/-fTsjO4st1xE/US3xHW9KWoI/AAAAAAAAAQo/e2XrKPtvjG8/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://lh5.googleusercontent.com/-fTsjO4st1xE/US3xHW9KWoI/AAAAAAAAAQo/e2XrKPtvjG8/s500/Bubble-Buttons.png'),url('https://lh5.googleusercontent.com/-fTsjO4st1xE/US3xHW9KWoI/AAAAAAAAAQo/e2XrKPtvjG8/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://lh5.googleusercontent.com/-fTsjO4st1xE/US3xHW9KWoI/AAAAAAAAAQo/e2XrKPtvjG8/s500/Bubble-Buttons.png'),url('https://lh5.googleusercontent.com/-fTsjO4st1xE/US3xHW9KWoI/AAAAAAAAAQo/e2XrKPtvjG8/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://lh5.googleusercontent.com/-fTsjO4st1xE/US3xHW9KWoI/AAAAAAAAAQo/e2XrKPtvjG8/s500/Bubble-Buttons.png'),url('https://lh5.googleusercontent.com/-fTsjO4st1xE/US3xHW9KWoI/AAAAAAAAAQo/e2XrKPtvjG8/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://lh5.googleusercontent.com/-fTsjO4st1xE/US3xHW9KWoI/AAAAAAAAAQo/e2XrKPtvjG8/s500/Bubble-Buttons.png'),url('https://lh5.googleusercontent.com/-fTsjO4st1xE/US3xHW9KWoI/AAAAAAAAAQo/e2XrKPtvjG8/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://lh5.googleusercontent.com/-fTsjO4st1xE/US3xHW9KWoI/AAAAAAAAAQo/e2XrKPtvjG8/s500/Bubble-Buttons.png'),url('https://lh5.googleusercontent.com/-fTsjO4st1xE/US3xHW9KWoI/AAAAAAAAAQo/e2XrKPtvjG8/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://lh5.googleusercontent.com/-fTsjO4st1xE/US3xHW9KWoI/AAAAAAAAAQo/e2XrKPtvjG8/s500/Bubble-Buttons.png'),url('https://lh5.googleusercontent.com/-fTsjO4st1xE/US3xHW9KWoI/AAAAAAAAAQo/e2XrKPtvjG8/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://lh5.googleusercontent.com/-fTsjO4st1xE/US3xHW9KWoI/AAAAAAAAAQo/e2XrKPtvjG8/s500/Bubble-Buttons.png'),url('https://lh5.googleusercontent.com/-fTsjO4st1xE/US3xHW9KWoI/AAAAAAAAAQo/e2XrKPtvjG8/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://lh5.googleusercontent.com/-fTsjO4st1xE/US3xHW9KWoI/AAAAAAAAAQo/e2XrKPtvjG8/s500/Bubble-Buttons.png'),url('https://lh5.googleusercontent.com/-fTsjO4st1xE/US3xHW9KWoI/AAAAAAAAAQo/e2XrKPtvjG8/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://lh5.googleusercontent.com/-fTsjO4st1xE/US3xHW9KWoI/AAAAAAAAAQo/e2XrKPtvjG8/s500/Bubble-Buttons.png'),url('https://lh5.googleusercontent.com/-fTsjO4st1xE/US3xHW9KWoI/AAAAAAAAAQo/e2XrKPtvjG8/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://lh5.googleusercontent.com/-fTsjO4st1xE/US3xHW9KWoI/AAAAAAAAAQo/e2XrKPtvjG8/s500/Bubble-Buttons.png'),url('https://lh5.googleusercontent.com/-fTsjO4st1xE/US3xHW9KWoI/AAAAAAAAAQo/e2XrKPtvjG8/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://lh5.googleusercontent.com/-fTsjO4st1xE/US3xHW9KWoI/AAAAAAAAAQo/e2XrKPtvjG8/s500/Bubble-Buttons.png'),url('https://lh5.googleusercontent.com/-fTsjO4st1xE/US3xHW9KWoI/AAAAAAAAAQo/e2XrKPtvjG8/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://lh5.googleusercontent.com/-fTsjO4st1xE/US3xHW9KWoI/AAAAAAAAAQo/e2XrKPtvjG8/s500/Bubble-Buttons.png'),url('https://lh5.googleusercontent.com/-fTsjO4st1xE/US3xHW9KWoI/AAAAAAAAAQo/e2XrKPtvjG8/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://lh5.googleusercontent.com/-fTsjO4st1xE/US3xHW9KWoI/AAAAAAAAAQo/e2XrKPtvjG8/s500/Bubble-Buttons.png'),url('https://lh5.googleusercontent.com/-fTsjO4st1xE/US3xHW9KWoI/AAAAAAAAAQo/e2XrKPtvjG8/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://lh5.googleusercontent.com/-fTsjO4st1xE/US3xHW9KWoI/AAAAAAAAAQo/e2XrKPtvjG8/s500/Bubble-Buttons.png'),url('https://lh5.googleusercontent.com/-fTsjO4st1xE/US3xHW9KWoI/AAAAAAAAAQo/e2XrKPtvjG8/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://lh5.googleusercontent.com/-fTsjO4st1xE/US3xHW9KWoI/AAAAAAAAAQo/e2XrKPtvjG8/s500/Bubble-Buttons.png'),url('https://lh5.googleusercontent.com/-fTsjO4st1xE/US3xHW9KWoI/AAAAAAAAAQo/e2XrKPtvjG8/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://lh5.googleusercontent.com/-fTsjO4st1xE/US3xHW9KWoI/AAAAAAAAAQo/e2XrKPtvjG8/s500/Bubble-Buttons.png'),url('https://lh5.googleusercontent.com/-fTsjO4st1xE/US3xHW9KWoI/AAAAAAAAAQo/e2XrKPtvjG8/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>

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!

Xem khác cùng chủ đề

3 nhận xét | Viết lời bình

2/28/2013 01:53:00 SA Trả lời

Cám ơn bài viết hay quá

3/09/2013 05:20:00 CH Trả lời

cái này cho vào chức năng thêm tiện ích->chèn html/javascipt đc không vậy?

Admin
3/09/2013 05:36:00 CH Trả lời

Nếu bạn muốn chèn vào HTML/Javascript thì chỉ cần cho đoạn code css vào giữa 2 thẻ <style> là được. Ví dụ:
[code]<style>

Đoạn code CSS

</style>[/code]

Bạn nhập từ: cungly Bạn nhập từ: lleu Bạn nhập từ: kkrong Bạn nhập từ: cuoilon Bạn nhập từ: roile Bạn nhập từ: hehehe Bạn nhập từ: byebye Bạn nhập từ: idontknow Bạn nhập từ: votay more »

Giải pháp bán hàng online Số 1 Việt Nam
Lên đầu trang Xuống cuối trang