[Thủ thuật blog] Cách tạo nút nút bấm siêu đẹp cho website, tao button đẹp

Cách tạo nút bấm button đẹp cho blog

Cách tạo nút nút bấm button đẹp cho blog

Bạn chỉ cần sử dụng các tool sau:
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

blue

b1.Ở 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;
}

------------------------------------------------------------------------

Lưu template