Cách làm button chuyển động bằng CSS3

Trước đây để tạo ra các hiệu ứng button chuyển động , bạn phải vẽ các button trong photoshop, rồi sau đó chuyển sang flash để làm nó có thể chuyển động. Nhưng giờ đây bạn không cần phải tốn quá nhiều thời gian để làm việc đó, tất cả chỉ vì sự xuất hiện của CSS3.
Các bạn có thể xem demo bài viết này tại đây.Chúng ta cùng bắt đầu từng bước nào:

Trước tiên tải các hình ảnh cho các button : Bước 1 : HTML

Các bạn copy đoạn html cho ví dụ minh họa, nhớ chú ý đến class của các button, mình sử dụng 2 kiểu button khác nhau, mỗi kiểu có thuộc tính riêng và mỗi button chứa các phần tử SPAN

<div id="container">
<div>
<a href="#">
<span></span>
<span>Button #1</span>
<span></span>
</a>
<a href="#">
<span></span>
<span>Button #2</span>
<span></span>
</a>
<a href="#">
<span></span>
<span>Button #3</span>
<span></span>
</a>
<div style="clear:both"></div>

<a href="#">
<span>Join us</span>
<span><span>For a free</span></span>
<span></span>
</a>
<a href="#">
<span>Try to search</span>
<span><input type="text" /></span>
<span></span>
</a>
<a href="#">
<span>Subscribe</span>
<span><input type="text" /></span>
<span></span>
</a>
</div>
</div>

Bước 2 : CSS
Và đây là toàn bộ đoạn css giúp bạn tạo ra những button động

/*buttons #1*/
.buttons {
overflow:hidden;
}
.but1{
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;

box-shadow:0px 0px 7px rgba(0,0,0,0.4) inset, 0px 0px 0px 4px rgba(255,255,255,0.1);
-moz-box-shadow:0px 0px 7px rgba(0,0,0,0.4) inset, 0px 0px 0px 4px rgba(255,255,255,0.1);
-webkit-box-shadow:0px 0px 7px rgba(0,0,0,0.4) inset, 0px 0px 0px 4px rgba(255,255,255,0.1);

background-color:#f4f5fe;
display:block;
float:left;
margin:10px;
overflow:hidden;
padding:10px 15px;
position:relative;
text-decoration:none;

transition:all 0.5s ease-in-out;
-moz-transition:all 0.5s ease-in-out;
-o-transition:all 0.5s ease-in-out;
-webkit-transition:all 0.5s ease-in-out;
}
.but1 .icon{
background:transparent url(../images/download.png) no-repeat top left;
float:left;
height:32px;
awidth:45px;

transition:all 0.5s ease-in-out;
-moz-transition:all 0.5s ease-in-out;
-o-transition:all 0.5s ease-in-out;
-webkit-transition:all 0.5s ease-in-out;
}
.but1 .title{
font-size:18px;
color:#000;
display:block;
float:left;
font-weight:bold;
line-height:32px;
}
.but1 .icon2{
background:transparent url(../images/download2.png) no-repeat top left;
height:32px;
left:20px;
opacity:0;
position:absolute;
top:-15px;
awidth:32px;
}
.but1:hover{
background-color:#e3e3ff;

box-shadow:0px 0px 4px rgba(0,0,0,0.5) inset, 0px 0px 0px 4px rgba(51,51,204,0.5);
-moz-box-shadow:0px 0px 4px rgba(0,0,0,0.5) inset, 0px 0px 0px 4px rgba(51,51,204,0.5);
-webkit-box-shadow:0px 0px 4px rgba(0,0,0,0.5) inset, 0px 0px 0px 4px rgba(51,51,204,0.5);

-webkit-transition-delay: 0.5s;
-moz-transition-delay: 0.5s;
-o-transition-delay: 0.5s;
-ms-transition-delay: 0.5s;
transition-delay: 0.5s;
}
.but1:hover .icon{
transform:rotate(-90deg) scale(0.8);
-ms-transform:rotate(-90deg) scale(0.8);
-moz-transform:rotate(-90deg) scale(0.8);
-o-transform:rotate(-90deg) scale(0.8);
-webkit-transform:rotate(-90deg) scale(0.8);
}
.but1:active .icon{
opacity:0;
}
.but1:active .icon2{
opacity:1;
-webkit-animation:slideDown1 1.0s linear infinite;
-moz-animation:slideDown1 1.0s linear infinite;
animation:slideDown1 1.0s linear infinite;
}
.but1:active{
background-color:#c1c1ff;

box-shadow:0 2px 4px rgba(0, 0, 0, 0.5) inset, 0px 0px 0px 4px rgba(51,51,204,0.8);
-moz-box-shadow:0 2px 4px rgba(0, 0, 0, 0.5) inset, 0px 0px 0px 4px rgba(51,51,204,0.8);
-webkit-box-shadow:0 2px 4px rgba(0, 0, 0, 0.5) inset, 0px 0px 0px 4px rgba(51,51,204,0.8);
}

@keyframes slideDown1{
0% {
top: -30px;
}
100% {
top: 55px;
}
}
@-webkit-keyframes slideDown1{
0% {
top: -30px;
}
100% {
top: 55px;
}
}
@-moz-keyframes slideDown1{
0% {
top: -30px;
}
100% {
top: 55px;
}
}

/*buttons #2*/
.but2{
border-radius:15px;
-moz-border-radius:15px;
-webkit-border-radius:15px;
background-color:#99cc99;
float:left;
height:40px;
margin:10px;
overflow:hidden;
padding-left:20px;
position:relative;
text-decoration:none;

transition:all 0.5s linear;
-moz-transition:all 0.5s linear;
-o-transition:all 0.5s linear;
-webkit-transition:all 0.5s linear;
}
.but2 .title{
color:#000000;
display:block;
float:left;
font-size:18px;
font-weight:bold;
line-height:40px;

transition:all 0.2s linear;
-moz-transition:all 0.2s linear;
-o-transition:all 0.2s linear;
-webkit-transition:all 0.2s linear;
}
.but2 .extra{
background-color:#63707e;
color:#fff;
float:left;
font-size:18px;
line-height:40px;
opacity:0;
position:relative;
text-transform:uppercase;
awidth:0px;
transition:all 0.3s linear;
-moz-transition:all 0.3s linear;
-o-transition:all 0.3s linear;
-webkit-transition:all 0.3s linear;
}
.but2 .extra span, .but2 .extra input {
display:none;
}
.but2 .icon{
background:transparent url(../images/right.png) no-repeat center center;
float:left;
height:40px;
awidth:40px;

transition:all 0.3s linear;
-moz-transition:all 0.3s linear;
-o-transition:all 0.3s linear;
-webkit-transition:all 0.3s linear;
}
.but2:hover .extra span, .but2:hover .extra input{
display:inline-block;
}
.but2:hover .extra{
margin-left:10px;
opacity: 1;
padding-left:10px;
padding-right:10px;
text-align:center;
awidth:150px;
}
.but2:hover .icon{
transform:rotate(180deg);
-ms-transform:rotate(180deg);
-moz-transform:rotate(180deg);
-o-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
}

Hy vọng với những button như thế này, sẽ làm cho website của bạn trông thật chuyên nghiệp và đẹp hơn. Chúc các bạn thành công !

Chú ý : hiệu ứng button này có thể không chạy trên tất cả các trình duyệt, vì thế bạn nên cân nhắc trước khi sử dụng.

Chuyên Mục: Css

Bài viết được đăng bởi webmaster