Đối với các blog chuyên viết về thủ thuật blog thì thường có link demo còn các blog chia sẻ phần mềm sẽ có các link download và để trông link trở nên bắt mắt hơn thì các bạn hãy xem bài hôm nay. Mình sẽ hướng dẫn các bạn tạo Button CSS với hiệu ứng chuyển động khi dê chuột, sẽ có to có nhỏ và đủ màu cho các bạn lựa chọn.
#DEMO
Khanh blog khanh98.blogspot.com LINKNAME LINKNAME LINKNAME LINKNAME LINKNAME LINKNAME LINKNAME LINKNAME LINKNAME LINKNAME#Thêm CSS
1. Đăng nhập Blogger2. Mẫu > Chỉnh sửa HTML
3. Tìm thẻ ]]></b:skin>
4. Dán code dưới vào trên thẻ vừa tìm rồi save lại
.button {display: inline-block;position: relative;padding: 10px 20px;-webkit-border-radius: 8px;-moz-border-radius: 8px;border-radius: 8px;text-decoration: none!important;text-shadow: 1px 1px 0 rgba(255,255,255,0.4);font: 15px Calibri,Arial,sans-serif;white-space: nowrap;vertical-align: baseline;background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwLUEkFNFA5eyicQZSNJtJjr4ZtIiuOT6g8tF5uqtmKrKCgOPor1lTnzgMaqEG-ti6ah1kNoPsQwf9bVZjLlt3tPqLteYOGBoXdElvgNlDMyjrdRdd_QNLvv4Oc7OqGuFwyvJPpyE8jJVJ/s144/button_bg.png');background-position: bottom left;background-position: bottom left,top right,0 0,0 0;background-repeat: no-repeat;background-clip: border-box;-webkit-box-shadow: 0 0 1px #fff inset;-moz-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;cursor: pointer;}
.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;}
.button.medium {font-size: 18px;}
.button.small {font-size: 13px;}
.blue.button {border: 1px solid #84acc3!important;color: #0f4b6d!important;background-color: #48b5f2;background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwLUEkFNFA5eyicQZSNJtJjr4ZtIiuOT6g8tF5uqtmKrKCgOPor1lTnzgMaqEG-ti6ah1kNoPsQwf9bVZjLlt3tPqLteYOGBoXdElvgNlDMyjrdRdd_QNLvv4Oc7OqGuFwyvJPpyE8jJVJ/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwLUEkFNFA5eyicQZSNJtJjr4ZtIiuOT6g8tF5uqtmKrKCgOPor1lTnzgMaqEG-ti6ah1kNoPsQwf9bVZjLlt3tPqLteYOGBoXdElvgNlDMyjrdRdd_QNLvv4Oc7OqGuFwyvJPpyE8jJVJ/s144/button_bg.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/AVvXsEiwLUEkFNFA5eyicQZSNJtJjr4ZtIiuOT6g8tF5uqtmKrKCgOPor1lTnzgMaqEG-ti6ah1kNoPsQwf9bVZjLlt3tPqLteYOGBoXdElvgNlDMyjrdRdd_QNLvv4Oc7OqGuFwyvJPpyE8jJVJ/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwLUEkFNFA5eyicQZSNJtJjr4ZtIiuOT6g8tF5uqtmKrKCgOPor1lTnzgMaqEG-ti6ah1kNoPsQwf9bVZjLlt3tPqLteYOGBoXdElvgNlDMyjrdRdd_QNLvv4Oc7OqGuFwyvJPpyE8jJVJ/s144/button_bg.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/AVvXsEiwLUEkFNFA5eyicQZSNJtJjr4ZtIiuOT6g8tF5uqtmKrKCgOPor1lTnzgMaqEG-ti6ah1kNoPsQwf9bVZjLlt3tPqLteYOGBoXdElvgNlDMyjrdRdd_QNLvv4Oc7OqGuFwyvJPpyE8jJVJ/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwLUEkFNFA5eyicQZSNJtJjr4ZtIiuOT6g8tF5uqtmKrKCgOPor1lTnzgMaqEG-ti6ah1kNoPsQwf9bVZjLlt3tPqLteYOGBoXdElvgNlDMyjrdRdd_QNLvv4Oc7OqGuFwyvJPpyE8jJVJ/s144/button_bg.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/AVvXsEiwLUEkFNFA5eyicQZSNJtJjr4ZtIiuOT6g8tF5uqtmKrKCgOPor1lTnzgMaqEG-ti6ah1kNoPsQwf9bVZjLlt3tPqLteYOGBoXdElvgNlDMyjrdRdd_QNLvv4Oc7OqGuFwyvJPpyE8jJVJ/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwLUEkFNFA5eyicQZSNJtJjr4ZtIiuOT6g8tF5uqtmKrKCgOPor1lTnzgMaqEG-ti6ah1kNoPsQwf9bVZjLlt3tPqLteYOGBoXdElvgNlDMyjrdRdd_QNLvv4Oc7OqGuFwyvJPpyE8jJVJ/s144/button_bg.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 {border: 1px solid #96a37b!important;color: #345903!important;background-color: #79be1e;background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwLUEkFNFA5eyicQZSNJtJjr4ZtIiuOT6g8tF5uqtmKrKCgOPor1lTnzgMaqEG-ti6ah1kNoPsQwf9bVZjLlt3tPqLteYOGBoXdElvgNlDMyjrdRdd_QNLvv4Oc7OqGuFwyvJPpyE8jJVJ/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwLUEkFNFA5eyicQZSNJtJjr4ZtIiuOT6g8tF5uqtmKrKCgOPor1lTnzgMaqEG-ti6ah1kNoPsQwf9bVZjLlt3tPqLteYOGBoXdElvgNlDMyjrdRdd_QNLvv4Oc7OqGuFwyvJPpyE8jJVJ/s144/button_bg.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/AVvXsEiwLUEkFNFA5eyicQZSNJtJjr4ZtIiuOT6g8tF5uqtmKrKCgOPor1lTnzgMaqEG-ti6ah1kNoPsQwf9bVZjLlt3tPqLteYOGBoXdElvgNlDMyjrdRdd_QNLvv4Oc7OqGuFwyvJPpyE8jJVJ/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwLUEkFNFA5eyicQZSNJtJjr4ZtIiuOT6g8tF5uqtmKrKCgOPor1lTnzgMaqEG-ti6ah1kNoPsQwf9bVZjLlt3tPqLteYOGBoXdElvgNlDMyjrdRdd_QNLvv4Oc7OqGuFwyvJPpyE8jJVJ/s144/button_bg.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/AVvXsEiwLUEkFNFA5eyicQZSNJtJjr4ZtIiuOT6g8tF5uqtmKrKCgOPor1lTnzgMaqEG-ti6ah1kNoPsQwf9bVZjLlt3tPqLteYOGBoXdElvgNlDMyjrdRdd_QNLvv4Oc7OqGuFwyvJPpyE8jJVJ/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwLUEkFNFA5eyicQZSNJtJjr4ZtIiuOT6g8tF5uqtmKrKCgOPor1lTnzgMaqEG-ti6ah1kNoPsQwf9bVZjLlt3tPqLteYOGBoXdElvgNlDMyjrdRdd_QNLvv4Oc7OqGuFwyvJPpyE8jJVJ/s144/button_bg.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/AVvXsEiwLUEkFNFA5eyicQZSNJtJjr4ZtIiuOT6g8tF5uqtmKrKCgOPor1lTnzgMaqEG-ti6ah1kNoPsQwf9bVZjLlt3tPqLteYOGBoXdElvgNlDMyjrdRdd_QNLvv4Oc7OqGuFwyvJPpyE8jJVJ/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwLUEkFNFA5eyicQZSNJtJjr4ZtIiuOT6g8tF5uqtmKrKCgOPor1lTnzgMaqEG-ti6ah1kNoPsQwf9bVZjLlt3tPqLteYOGBoXdElvgNlDMyjrdRdd_QNLvv4Oc7OqGuFwyvJPpyE8jJVJ/s144/button_bg.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 {border: 1px solid #bea280!important;color: #693e0a!important;background-color: #e38d27;background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwLUEkFNFA5eyicQZSNJtJjr4ZtIiuOT6g8tF5uqtmKrKCgOPor1lTnzgMaqEG-ti6ah1kNoPsQwf9bVZjLlt3tPqLteYOGBoXdElvgNlDMyjrdRdd_QNLvv4Oc7OqGuFwyvJPpyE8jJVJ/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwLUEkFNFA5eyicQZSNJtJjr4ZtIiuOT6g8tF5uqtmKrKCgOPor1lTnzgMaqEG-ti6ah1kNoPsQwf9bVZjLlt3tPqLteYOGBoXdElvgNlDMyjrdRdd_QNLvv4Oc7OqGuFwyvJPpyE8jJVJ/s144/button_bg.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/AVvXsEiwLUEkFNFA5eyicQZSNJtJjr4ZtIiuOT6g8tF5uqtmKrKCgOPor1lTnzgMaqEG-ti6ah1kNoPsQwf9bVZjLlt3tPqLteYOGBoXdElvgNlDMyjrdRdd_QNLvv4Oc7OqGuFwyvJPpyE8jJVJ/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwLUEkFNFA5eyicQZSNJtJjr4ZtIiuOT6g8tF5uqtmKrKCgOPor1lTnzgMaqEG-ti6ah1kNoPsQwf9bVZjLlt3tPqLteYOGBoXdElvgNlDMyjrdRdd_QNLvv4Oc7OqGuFwyvJPpyE8jJVJ/s144/button_bg.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/AVvXsEiwLUEkFNFA5eyicQZSNJtJjr4ZtIiuOT6g8tF5uqtmKrKCgOPor1lTnzgMaqEG-ti6ah1kNoPsQwf9bVZjLlt3tPqLteYOGBoXdElvgNlDMyjrdRdd_QNLvv4Oc7OqGuFwyvJPpyE8jJVJ/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwLUEkFNFA5eyicQZSNJtJjr4ZtIiuOT6g8tF5uqtmKrKCgOPor1lTnzgMaqEG-ti6ah1kNoPsQwf9bVZjLlt3tPqLteYOGBoXdElvgNlDMyjrdRdd_QNLvv4Oc7OqGuFwyvJPpyE8jJVJ/s144/button_bg.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/AVvXsEiwLUEkFNFA5eyicQZSNJtJjr4ZtIiuOT6g8tF5uqtmKrKCgOPor1lTnzgMaqEG-ti6ah1kNoPsQwf9bVZjLlt3tPqLteYOGBoXdElvgNlDMyjrdRdd_QNLvv4Oc7OqGuFwyvJPpyE8jJVJ/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwLUEkFNFA5eyicQZSNJtJjr4ZtIiuOT6g8tF5uqtmKrKCgOPor1lTnzgMaqEG-ti6ah1kNoPsQwf9bVZjLlt3tPqLteYOGBoXdElvgNlDMyjrdRdd_QNLvv4Oc7OqGuFwyvJPpyE8jJVJ/s144/button_bg.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 {border: 1px solid #a5a5a5!important;color: #525252!important;background-color: #a9adb1;background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwLUEkFNFA5eyicQZSNJtJjr4ZtIiuOT6g8tF5uqtmKrKCgOPor1lTnzgMaqEG-ti6ah1kNoPsQwf9bVZjLlt3tPqLteYOGBoXdElvgNlDMyjrdRdd_QNLvv4Oc7OqGuFwyvJPpyE8jJVJ/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwLUEkFNFA5eyicQZSNJtJjr4ZtIiuOT6g8tF5uqtmKrKCgOPor1lTnzgMaqEG-ti6ah1kNoPsQwf9bVZjLlt3tPqLteYOGBoXdElvgNlDMyjrdRdd_QNLvv4Oc7OqGuFwyvJPpyE8jJVJ/s144/button_bg.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/AVvXsEiwLUEkFNFA5eyicQZSNJtJjr4ZtIiuOT6g8tF5uqtmKrKCgOPor1lTnzgMaqEG-ti6ah1kNoPsQwf9bVZjLlt3tPqLteYOGBoXdElvgNlDMyjrdRdd_QNLvv4Oc7OqGuFwyvJPpyE8jJVJ/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwLUEkFNFA5eyicQZSNJtJjr4ZtIiuOT6g8tF5uqtmKrKCgOPor1lTnzgMaqEG-ti6ah1kNoPsQwf9bVZjLlt3tPqLteYOGBoXdElvgNlDMyjrdRdd_QNLvv4Oc7OqGuFwyvJPpyE8jJVJ/s144/button_bg.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/AVvXsEiwLUEkFNFA5eyicQZSNJtJjr4ZtIiuOT6g8tF5uqtmKrKCgOPor1lTnzgMaqEG-ti6ah1kNoPsQwf9bVZjLlt3tPqLteYOGBoXdElvgNlDMyjrdRdd_QNLvv4Oc7OqGuFwyvJPpyE8jJVJ/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwLUEkFNFA5eyicQZSNJtJjr4ZtIiuOT6g8tF5uqtmKrKCgOPor1lTnzgMaqEG-ti6ah1kNoPsQwf9bVZjLlt3tPqLteYOGBoXdElvgNlDMyjrdRdd_QNLvv4Oc7OqGuFwyvJPpyE8jJVJ/s144/button_bg.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/AVvXsEiwLUEkFNFA5eyicQZSNJtJjr4ZtIiuOT6g8tF5uqtmKrKCgOPor1lTnzgMaqEG-ti6ah1kNoPsQwf9bVZjLlt3tPqLteYOGBoXdElvgNlDMyjrdRdd_QNLvv4Oc7OqGuFwyvJPpyE8jJVJ/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwLUEkFNFA5eyicQZSNJtJjr4ZtIiuOT6g8tF5uqtmKrKCgOPor1lTnzgMaqEG-ti6ah1kNoPsQwf9bVZjLlt3tPqLteYOGBoXdElvgNlDMyjrdRdd_QNLvv4Oc7OqGuFwyvJPpyE8jJVJ/s144/button_bg.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));}
#Sử dụng khi viết bài
Khi bài mà bạn muốn sử dụng những button trên thì chuyển sang chế độ viết HTML và sử dụng code bên dưới, mỗi dòng code tương ứng với 1 button.
<a class="button big blue" href="LINK">LINKNAME</a> <a class="button big green" href="LINK">LINKNAME</a> <a class="button big orange" href="LINK">LINKNAME</a> <a class="button big gray" href="LINK">LINKNAME</a> <a class="button blue medium" href="LINK">LINKNAME</a> <a class="button green medium" href="LINK">LINKNAME</a> <a class="button orange medium" href="LINK">LINKNAME</a> <a class="button gray medium" href="LINK">LINKNAME</a> <a class="button small blue" href="LINK">LINKNAME</a> <a class="button small green" href="LINK">LINKNAME</a> <a class="button small orange" href="LINK">LINKNAME</a> <a class="button small gray" href="LINK">LINKNAME</a>
Comments
Post a Comment
» Vui lòng không spam vì nó sẽ bị xóa ngay sau đó.
» Nếu chèn code hãy mã hóa trước khi chèn vào nhận xét.
» Nếu thủ thuật Blog không áp dụng được thì hãy để lại URL blog để mình tiện kiểm tra.