Cách tạo nút bấm button đẹp cho blog
.jpg "Cách tạo nút nút bấm button đẹp cho blog")
Những tool này được phát triển dựa theo tính năng trực quan giúp các bạn chỉ cần kéo, thả và tự chọn màu sắc cho nút bấm của mình.
Điều cần làm là bạn chỉ cần truy cập website:
- http://www.bestcssbuttongenerator.com/
- http://dabuttonfactory.com/
- http://css3designer.com/tools
- http://css3button.net/
- http://www.cssportal.com/css3-button-generator/
Sau đây mình ví dụ 1 mẫu button đẹp
blueb1.Ở trong đoạn <head>...</head>
---------------------------
<html> <head> <style> Ta sẽ bỏ CSS vào đây </style> </head> <body> <a class="myButton">Button với CSS3</a>
</body></html>----------------Chèn đoạn css dưới đây
--------------------------------------------------------------------------
.myButton {
-moz-box-shadow:inset 0px 1px 0px 0px #97c4fe;
-webkit-box-shadow:inset 0px 1px 0px 0px #97c4fe;
box-shadow:inset 0px 1px 0px 0px #97c4fe;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #3d94f6), color-stop(1, #1e62d0));
background:-moz-linear-gradient(top, #3d94f6 5%, #1e62d0 100%);
background:-webkit-linear-gradient(top, #3d94f6 5%, #1e62d0 100%);
background:-o-linear-gradient(top, #3d94f6 5%, #1e62d0 100%);
background:-ms-linear-gradient(top, #3d94f6 5%, #1e62d0 100%);
background:linear-gradient(to bottom, #3d94f6 5%, #1e62d0 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3d94f6', endColorstr='#1e62d0',GradientType=0);
background-color:#3d94f6;
-moz-border-radius:14px;
-webkit-border-radius:14px;
border-radius:14px;
border:1px solid #337fed;
display:inline-block;
cursor:pointer;
color:#050505;
font-family:Times New Roman;
font-size:28px;
font-weight:bold;
padding:17px 70px;
text-decoration:none;
text-shadow:0px 1px 0px #1570cd;
}
.myButton:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #1e62d0), color-stop(1, #3d94f6));
background:-moz-linear-gradient(top, #1e62d0 5%, #3d94f6 100%);
background:-webkit-linear-gradient(top, #1e62d0 5%, #3d94f6 100%);
background:-o-linear-gradient(top, #1e62d0 5%, #3d94f6 100%);
background:-ms-linear-gradient(top, #1e62d0 5%, #3d94f6 100%);
background:linear-gradient(to bottom, #1e62d0 5%, #3d94f6 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#1e62d0', endColorstr='#3d94f6',GradientType=0);
background-color:#1e62d0;
}
.myButton:active {
position:relative;
top:1px;
}
-moz-box-shadow:inset 0px 1px 0px 0px #97c4fe;
-webkit-box-shadow:inset 0px 1px 0px 0px #97c4fe;
box-shadow:inset 0px 1px 0px 0px #97c4fe;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #3d94f6), color-stop(1, #1e62d0));
background:-moz-linear-gradient(top, #3d94f6 5%, #1e62d0 100%);
background:-webkit-linear-gradient(top, #3d94f6 5%, #1e62d0 100%);
background:-o-linear-gradient(top, #3d94f6 5%, #1e62d0 100%);
background:-ms-linear-gradient(top, #3d94f6 5%, #1e62d0 100%);
background:linear-gradient(to bottom, #3d94f6 5%, #1e62d0 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3d94f6', endColorstr='#1e62d0',GradientType=0);
background-color:#3d94f6;
-moz-border-radius:14px;
-webkit-border-radius:14px;
border-radius:14px;
border:1px solid #337fed;
display:inline-block;
cursor:pointer;
color:#050505;
font-family:Times New Roman;
font-size:28px;
font-weight:bold;
padding:17px 70px;
text-decoration:none;
text-shadow:0px 1px 0px #1570cd;
}
.myButton:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #1e62d0), color-stop(1, #3d94f6));
background:-moz-linear-gradient(top, #1e62d0 5%, #3d94f6 100%);
background:-webkit-linear-gradient(top, #1e62d0 5%, #3d94f6 100%);
background:-o-linear-gradient(top, #1e62d0 5%, #3d94f6 100%);
background:-ms-linear-gradient(top, #1e62d0 5%, #3d94f6 100%);
background:linear-gradient(to bottom, #1e62d0 5%, #3d94f6 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#1e62d0', endColorstr='#3d94f6',GradientType=0);
background-color:#1e62d0;
}
.myButton:active {
position:relative;
top:1px;
}
------------------------------------------------------------------------
Lưu template
b2.Trong bài viết chèn đoạn mã sau đây
------------------------------------------------------------------------
<a href="Link muốn hiển thị" class="myButton">Đoạn text muốn hiển thị</a>
-----------------------------------------------------------------------
b3. Nếu muốn hiển thị ở trang chủ
Chèn:<a class="myButton">Đoạn text muốn hiển thị</a>
Done!
Đăng nhận xét