Tạo Button CSS3 Gradient

Để cho website linh động và hấp dẫn,ta phải tut lại phần giao diện giúp cho web or blog có cái nhìn mới sinh động hơn.Và chúng ta nên cải tiến button 1 chút cho toàn diện hơn.

Đây là button dạng CSS3 Gradient bo góc và hiệu ứng hover khi ta rê chuột vào trong đẹp hơn.

1. Điểm đặc biệt của Button CSS3 Gradient :

• Pure CSS: no image or Javascript is used.
• The gradient is cross-browser supported (IE, Firefox 3.6, Chrome, and Safari).
• Flexible and scalable: button size and rounded corners can be adjusted by changing the font size and padding values.
• It has three button states: normal, hover, and active.
• It can be applied to any HTML element: a, input, button, span, div, p, h3, etc.
• Fallback: if CSS3 is not supported, it will display a regular button (no gradient and shadow).

2. Hiển thị:

3. CSS:

.button {
display:inline-block outline: none;
cursor: pointer;text-align:center;
text-decoration: none;
font:14px/100% Arial, Helvetica, sans-serif;
padding:.5em 2em .55em;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: .5em;-moz-border-radius: .5em;
border-radius:.5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.button:hover {text-decoration: none; }
.button:active {position: relative;top: 1px; }

4.Color Gradient Style :

/* green */
.green {
color: #e8f0de;
border: solid 1px #538312;
background: #64991e;
background: -webkit-gradient(linear, left top, left bottom, from(#7db72f), to(#4e7d0e));
background: -moz-linear-gradient(top, #7db72f, #4e7d0e);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db72f', endColorstr='#4e7d0e');
}
.green:hover {
background: #538018;
background: -webkit-gradient(linear, left top, left bottom, from(#6b9d28), to(#436b0c));
background: -moz-linear-gradient(top, #6b9d28, #436b0c);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b9d28', endColorstr='#436b0c');
}
.green:active {
color: #a9c08c;
background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e), to(#7db72f));
background: -moz-linear-gradient(top, #4e7d0e, #7db72f);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4e7d0e', endColorstr='#7db72f');
}

/* blue */
.blue {
color: #d9eef7;
border: solid 1px #0076a3;
background: #0095cd;
background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
background: -moz-linear-gradient(top, #00adee, #0078a5);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5');
}
.blue:hover {
background: #007ead;
background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));
background: -moz-linear-gradient(top, #0095cc, #00678e);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0095cc', endColorstr='#00678e');
}
.blue:active {
color: #80bed6;
background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee));
background: -moz-linear-gradient(top, #0078a5, #00adee);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5', endColorstr='#00adee');
}

5. HTML :

<div>
<a href="#" class="button black">Rectangle</a> or
<a href="#" class="button black bigrounded">Rounded</a> Can be
<a href="#" class="button black medium">Medium</a> or
<a href="#" class="button black small">Small</a>
<br /><br />
<input class="button black" type="button" value="Input Element" />
<button class="button black">Button Tag</button>
<span class="button black">Span</span>
<div class="button black">Div</div>
<p class="button black">P Tag</p>
<h3 class="button black">H3</h3>
</div>