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.

» 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!