Tạo nút button: download, demo ... với hiệu ứng bọt nước bằng CSS3 cho Blogspot

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://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 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>

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/