Tạo Button Với Hiệu Ứng Tuyệt Đẹp Style 3

DESBLOG. Sẽ hướng dẫn tiếp cho các bạn cách tạo ra một Button có hiệu ứng hover tuyệt đẹp. Với Style 3 này chắc sẽ làm các bạn hài lòng.
(Lưu ý: Mình Code hoàn toàn bằng Sublime Text nên có thể bạn sẽ phải chỉnh sửa một số cái đề phù hợp với Blog của mình. Thân !!)

Bạn cũng có thể xem lại 2 Style trước:

• Button Với Hiệu Ứng Cực Đẹp Style 2
• Tạo Button Bằng CSS Có Hiệu Ứng Đẹp Cho Blogspot

CSS: Thêm đoạn CSS này dưới thẻ ]]></b:skin>

body
{
margin:0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.but a
{
position: relative;
padding: 15px 40px;
border: 2px solid #111;
font-size: 24px;
font-family: sans-serif;
text-decoration: none;
text-transform: uppercase;
display: block;
box-sizing: border-box;
border-radius: 32px;
color: #000;
overflow: hidden;
transition-delay: 1s
}
.but a:hover{
transition-delay: 1s;
color: #fff
}
.but a:before
{
content: '';
position: absolute;
left: 30px;
top: 50%;
transform: translateY(-50%) scale(.6);
width:10px;
height: 10px;
background: #ff0052;
border-radius: 50%;
z-index: -1;
transition-property: left, transform;
transition-delay:0s,0s;
transition-duration: 1s,0.5s;
}
.but a:hover:before
{
left:10px;
transform: translateY(-50%) scale(20);
transition-delay:0s,1s;
}
.but a:after
{
content: '';
position: absolute;
right: 30px;
top: 50%;
transform: translateY(-50%) scale(.6);
width:10px;
height: 10px;
background: #ff0052;
border-radius: 50%;
z-index: -1;
transition-property: right, transform;
transition-delay:0s,0s;
transition-duration: 1s,0.5s;
}
.but a:hover:after
{
right: :30px;
transform: translateY(-50%) scale(20);
transition-delay:0s,1s;
}

Code hiển thị

<div class="but">
<a href="#">Button</a>
</div>

Chúc các bạn thành công !!