Hiệu ứng button quay cực đẹp

Chào các bạn, hôm nay CHOTHEMEWP sẽ hướng dẫn các bạn “Hiệu ứng button quay cực đẹp”. Cách làm như thế nào, hãy cùng Chothemewp tìm hiểu nhé.

Phần HTML:

Ở phần này, các bạn thực hiện cho mình 1 đoạn code HTML như sau

 <div class="downloads">
	 <a class="demobutton button" href="https://www.facebook.com/profile.php?id=61550057254043" target="_blank" rel="nofollow noopener">Fanpage  </a>
	 <a class="button downloadbutton" href="https://chothemewp.com/" 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 */