Hiệu ứng Button Quay Cực đẹp - DANDEV

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