Tất cả bài viết | CSS3

Hướng dẫn cách tạo hiệu ứng cho nút bằng CSS3

Trong bài học thiết kế web này các Bạn sẽ được Hướng dẫn cách tạo hiệu ứng cho nút bằng CSS3

Bước 1: Tạo cấu trúc HTML

 
 Hướng dẫn cách tạo hiệu ứng cho nút bằng CSS3

Bước 2: Định dạng và tạo hiệu ứng cho nút bằng CSS3

 
 
body{ 
margin:0 auto; 
padding:0px; 
text-align:center; 
width:100%; 
font-family: "Myriad Pro","Helvetica Neue",Helvetica,Arial,Sans-Serif;
}
#wrapper{ 
margin:0 auto; 
padding:0px; 
text-align:center;
width:995px;	
}

#wrapper h1{ 
margin-top:50px; 
font-size:45px; 
color:#34495E;
}

#wrapper h1 p{
font-size:18px;
}

#button_div input[type="button"]{ 
background-color:none; 
width:120px; 
height:50px; 
margin:20px; 
font-size:17px; 
color:white; 
border:none;
}

#button_div .simple{ 
background-color:green; 
border: 1px solid green; 
transition: all 0.35s ease; 
border-radius:5px;
}
#button_div .simple:hover{ 
border: 1px solid green; 
background-color:white; 
color:green;
}

#button_div .zoom{ 
background-color:#5DADE2; 
transition: all 0.35s ease; 
border-radius:5px;
}

#button_div .zoom:hover{ 
border: 1px solid #5DADE2; 
background-color:white; 
color:#5DADE2; 
transform: scale(1.2);}

#button_div .round{ 
background-color:#922B21; 
transition: all 0.35s ease;
}

#button_div .round:hover{ 
border: 1px solid #922B21; 
background-color:white; 
color:#922B21; 
border-radius:15px;
}

#button_div .border{ 
background-color:#6C3483; 
transition: all 0.35s ease; 
border-radius:10px 0px 10px 0px;
}

#button_div .border:hover{ 
border: 1px solid #6C3483; 
background-color:white; 
color:#6C3483; 
border-radius:0px 10px 0px 10px;
}

#button_div .box{ 
background-color:#117A65; 
transition: all 0.35s ease; 
border-radius:15px;
}

#button_div .box:hover{ 
border: 1px solid #117A65; 
background-color:white; 
color:#117A65; 
border-radius:0px;
}

#button_div .shadow{ 
background-color:#B7950B; 
transition: all 0.35s ease; 
border-radius:5px;
}
#button_div .shadow:hover{ 
border: 1px solid #B7950B; 
background-color:white; 
color:#B7950B; 
box-shadow:0px 0px 25px 0px #B7950B;
}

#button_div .vertical{ 
background-color:#873600; 
transition: all 0.35s ease; 
border-radius:5px;
}

#button_div .vertical:hover{ 
border: 1px solid #873600; 
background-color:white; 
color:#873600; 
animation: vertical .50s linear alternate;
}

@keyframes vertical { 
20%{transform: translateY(0);
} 

40% {transform: translateY(-10px);
} 

60%{transform: translateY(0px);
} 

80%{transform: translateY(15px);
} 

100% {transform: translateY(0);
} 
}

#button_div .horizontal{ 
background-color:#979A9A; 
transition: all 0.35s ease; 
border-radius:5px;
}

#button_div .horizontal:hover{ 
border: 1px solid #979A9A; 
background-color:white; 
color:#979A9A; 
animation: horizontal .50s linear alternate;
}

@keyframes horizontal { 
20%{transform: translateX(0);
} 

40% {transform: translateX(-10px);
} 

60%{transform: translateX(0px);
} 

80%{transform: translateX(15px);
} 

100% {transform: translateX(0);
} 
}

#button_div .shake{ 
background-color:#212F3C; 
transition: all 0.35s ease; 
border-radius:5px;
}

#button_div .shake:hover{ 
border: 1px solid #212F3C; 
background-color:white; 
color:#212F3C; 
animation: shake 0.005s 100 linear alternate;
}

@keyframes shake { 
from{transform: rotate(2deg);
} 

to{transform: rotate(-2deg);
}
}

#button_div .shrink{ 
background-color:#58D68D; 
transition: all 0.35s ease; 
border-radius:5px;
}

#button_div .shrink:hover{ 
border: 1px solid #58D68D; 
background-color:white; 
color:#58D68D; transform: scale(0.9);
}

#button_div .bounce{ 
background-color:#9E0EC8; 
transition: all 0.35s ease; 
border-radius:5px;
}

#button_div .bounce:hover{ 
border: 1px solid #9E0EC8; 
background-color:white; 
color:#9E0EC8; animation: bounce 0.25s 2 linear alternate;
}

@keyframes bounce { 
0%{transform: rotate(0deg);
} 

50%{transform: rotate(3deg);
} 

100%{transform: rotate(-3deg);
}

}

Xem demo Tải Code Đăng ký tham gia làm hội viên của kênh để được xem các bài học mới nhất