Hiệu ứng button quay cực đẹp
Lượt xem: 4514
Xem demo
DANDEV chia sẻ với các bạn cách làm hiệu ứng quay với button bằng css. Cụ thể ở đây mình dùng hiệu ứng rotate.
Phần HTML:
<div class="downloads">
<a class="demobutton button" href="https://www.facebook.com/sharebacsic/" target="_blank" rel="nofollow noopener">Fanpage </a>
<a class="button downloadbutton" href="https://dandev.net/download" target="_blank" >Download </a>
</div>
Phần CSS:
/* Start button download & demo */
.downloads a, .downloads span {
margin-left:10px;
text-decoration: none;
background:none;
font-size: 15px;
color: #000;
}
.downloads .button:hover {
box-shadow:none;
color: #ff4422;
}
.downloads {
height: 50px;
font-weight:bold;
display: flex;
justify-content: center;
align-items: center;
}
.button {
position: relative;
color: red;
width: 150px;
height: 50px;
line-height: 50px;
transition: all 0.3s;
text-align: center;
}
.demobutton::before, .demobutton::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
bottom: 0;
left: 0;
z-index: 1;
transition: all 0.3s;
border: 2px solid red;
}
.downloadbutton::before, .downloadbutton::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
bottom: 0;
left: 0;
z-index: 1;
transition: all 0.3s;
border: 2px solid blue;
}
.button:hover::after {
animation-name: rotatecw;
animation-duration: 2s;
}
.button:hover::before {
animation-name: rotateccw;
animation-duration: 3s;
}
.button:hover::after, .button:hover::before {
left: 50px;
width: 50px;
background:none;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes rotatecw {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
@keyframes rotateccw {
from {transform: rotate(0deg);}
to {transform: rotate(-360deg);}
}
/* End button download & demo */
Xem thêm video cách nhúng button trên vào wordpress:
Xem demo