Trong quá trình thiết kế web, chắc hẳn là các bạn sẽ dùng tới button rất nhiều vào trong trang web hay blog của mình. Hôm nay, mình xin chia sẻ cho các bạn thêm một vài button với hiệu ứng hover cực đẹp, các bạn có thể ứng dụng vào trong các dự án của mình.
Download
HTML
Đầu tiên, chúng ta cần có khung chuẩn html như sau :
<section class="buttons">
<div class="container">
<h1>Button Hover Effects</h1>
<a href="https://twitter.com/Dave_Conner" class="btn btn-1">
<svg>
<rect x="0" y="0" fill="none" width="100%" height="100%"/>
</svg>
Hover
</a>
<!--End of Button 1 -->
<a href="https://twitter.com/Dave_Conner" class="btn btn-2">Hover</a>
<!--End of Button 2 -->
<a href="https://twitter.com/Dave_Conner" class="btn btn-3">Hover</a>
<!--End of Button 3 -->
<a href="https://twitter.com/Dave_Conner" class="btn btn-4"><span>Hover</span></a>
<!--End of Button 4 -->
<a href="https://twitter.com/Dave_Conner" class="btn btn-5">Hover</a>
<!--End of Button 5 -->
<p>Follow on <a href="http://www.twitter.com/thuthuatweb" target="_blank">Twitter</a></p>
</div>
</section>
CSS
Và sau đây là toàn bộ đoạn css giúp các bạn tạo được hiệu ứng button :
@import url(https://fonts.googleapis.com/css?family=Roboto:400,100,900);
* {
box-sizing: inherit;
transition-property: all;
transition-duration: .6s;
transition-timing-function: ease;
}
html,
body {
box-sizing: border-box;
height: 100%;
width: 100%;
}
body {
background: #E1332D;
font-family: 'Roboto', sans-serif;
font-weight: 400;
}
.buttons {
display: table;
height: 100%;
width: 100%;
}
.container {
display: table-cell;
padding: 1em;
text-align: center;
vertical-align: middle;
}
h1 {
color: #fff;
font-size: 1.25em;
font-weight: 900;
margin: 0 0 2em;
}
@media (min-width: 450px) {
h1 {
font-size: 1.75em;
}
}
@media (min-width: 760px) {
h1 {
font-size: 3.25em;
}
}
@media (min-width: 900px) {
h1 {
font-size: 5.25em;
margin: 0 0 1em;
}
}
p {
color: #fff;
font-size: 12px;
}
@media (min-width: 600px) {
p {
left: 50%;
position: absolute;
transform: translate(-50%, 0);
top: 90%;
}
}
@media (max-height: 500px) {
p {
left: 0;
position: relative;
top: 0;
transform: translate(0, 0);
}
}
p a {
background: rgba(255, 255, 255, 0);
border-bottom: 1px solid;
color: #fff;
line-height: 1.4;
padding: .25em;
text-decoration: none;
}
p a:hover {
background: white;
color: #E1332D;
}
.btn {
color: #fff;
cursor: pointer;
display: block;
font-size: 16px;
font-weight: 400;
line-height: 45px;
margin: 0 auto 2em;
max-width: 160px;
position: relative;
text-decoration: none;
text-transform: uppercase;
vertical-align: middle;
width: 100%;
}
@media (min-width: 400px) {
.btn {
display: inline-block;
margin-right: 2.5em;
}
.btn:nth-of-type(even) {
margin-right: 0;
}
}
@media (min-width: 600px) {
.btn:nth-of-type(even) {
margin-right: 2.5em;
}
.btn:nth-of-type(5) {
margin-right: 0;
}
}
.btn:hover {
text-decoration: none;
}
.btn-1 {
background: #e02c26;
font-weight: 100;
}
.btn-1 svg {
height: 45px;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.btn-1 rect {
fill: none;
stroke: #fff;
stroke-width: 1;
stroke-dasharray: 422, 0;
}
.btn-1:hover {
background: rgba(225, 51, 45, 0);
font-weight: 900;
letter-spacing: 1px;
}
.btn-1:hover rect {
stroke-width: 5;
stroke-dasharray: 15, 310;
stroke-dashoffset: 48;
transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1);
}
.btn-2 {
letter-spacing: 0;
}
.btn-2:hover,
.btn-2:active {
letter-spacing: 5px;
}
.btn-2:after,
.btn-2:before {
backface-visibility: hidden;
border: 1px solid rgba(255, 255, 255, 0);
bottom: 0px;
content: " ";
display: block;
margin: 0 auto;
position: relative;
transition: all 280ms ease-in-out;
width: 0;
}
.btn-2:hover:after,
.btn-2:hover:before {
backface-visibility: hidden;
border-color: #fff;
transition: width 350ms ease-in-out;
width: 70%;
}
.btn-2:hover:before {
bottom: auto;
top: 0;
width: 70%;
}
.btn-3 {
background: #e3403a;
border: 1px solid #da251f;
box-shadow: 0px 2px 0 #d6251f, 2px 4px 6px #e02a24;
font-weight: 900;
letter-spacing: 1px;
transition: all 150ms linear;
}
.btn-3:hover {
background: #e02c26;
border: 1px solid rgba(0, 0, 0, 0.05);
box-shadow: 1px 1px 2px rgba(255, 255, 255, 0.2);
color: #ec817d;
text-decoration: none;
text-shadow: -1px -1px 0 #c2211c;
transition: all 250ms linear;
}
.btn-4 {
border: 1px solid;
overflow: hidden;
position: relative;
}
.btn-4 span {
z-index: 20;
}
.btn-4:after {
background: #fff;
content: "";
height: 155px;
left: -75px;
opacity: .2;
position: absolute;
top: -50px;
transform: rotate(35deg);
transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
width: 50px;
z-index: -10;
}
.btn-4:hover:after {
left: 120%;
transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
}
.btn-5 {
border: 0 solid;
box-shadow: inset 0 0 20px rgba(255, 255, 255, 0);
outline: 1px solid;
outline-color: rgba(255, 255, 255, 0.5);
outline-offset: 0px;
text-shadow: none;
transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);
}
.btn-5:hover {
border: 1px solid;
box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.5), 0 0 20px rgba(255, 255, 255, 0.2);
outline-color: rgba(255, 255, 255, 0);
outline-offset: 15px;
text-shadow: 1px 1px 2px #427388;
}
Các bạn thấy sao ? Rất đẹp đúng không nào, button mà mình giới thiệu cho các bạn trong bài viết này chỉ là phụ, mục đích chính là muốn các bạn hiểu và sử dụng rõ CSS3 cho các dự án thiết kế web của các bạn sau này.