Tạo bộ Button đẹp bằng CSS3 (P3)

Người đăng: buonkhongem on Thứ Ba, 6 tháng 8, 2013

Hôm nay mình tiếp tục giới thiệu cho các bạn thêm cách tạo Button bằng CSS3 với hiệu ứng gradient rất đẹp mắt.

Các bạn có thể xem Demo bên dưới:

Bấm để xem Demo

» Bắt đầu thủ thuật

1. Đăng nhập (login) 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) >> Chọn Tiếp tục (continue) >> Xem video:

4. Dán code button bên dưới và chèn vào trước thẻ ]]></b:skin>

/* button
---------------------------------------------- */
.button {
display: inline-block;
zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
*display: inline;
vertical-align: baseline;
margin: 0 2px;
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;
}

.bigrounded {
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
}
.medium {
font-size: 12px;
padding: .4em 1.5em .42em;
}
.small {
font-size: 11px;
padding: .2em 1em .275em;
}

- Tiếp theo để tạo hiệu ứng gradient Bạn chọn một trong những màu bạn thích bên dưới và dán vào trước thẻ đóng ]]></b:skin>

1. Mầu đen

/* black */
.black {
color: #d7d7d7;
border: solid 1px #333;
background: #333;
background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#000));
background: -moz-linear-gradient(top, #666, #000); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#000000');
}
.black:hover {
background: #000;
background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#000));
background: -moz-linear-gradient(top, #444, #000); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#000000');
}
.black:active {
color: #666;
background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#444));
background: -moz-linear-gradient(top, #000, #444); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#666666');
}

- Để sử dụng bạn dùng code sau (Chọn lấy một dòng mà bạn muốn):

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