[Học wordpress] Chia sẻ code Css button cực đẹp dành cho dân code chuyên

Xin chào mọi người, hôm nay ChoThemeWp sẽ hướng dẫn mọi người thực hiện code Css cho một nút viền chuyển động tròn cực kỳ đẹp nhé. Các bạn có thể xem demo dưới đây:

See the Pen
Glowing buttons by Pranjal Bhadu (@bhadupranjal)
on CodePen.

Vậy cách làm như thế nào, hãy xem nhé.

Bước 1. Thêm HTML sau vào bất kỳ đâu bạn muốn

<a href="#" class="neon-button">
    <span class="neon-inner"></span>
    <span class="neon-inner"></span>
    <span class="neon-inner"></span>
    <span class="neon-inner"></span>
    Neon button
</a>
<a href="#" class="neon-button">
    <span class="neon-inner"></span>
    <span class="neon-inner"></span>
    <span class="neon-inner"></span>
    <span class="neon-inner"></span>
    Neon button
</a>
<a href="#" class="neon-button">
    <span class="neon-inner"></span>
    <span class="neon-inner"></span>
    <span class="neon-inner"></span>
    <span class="neon-inner"></span>
    Neon button
</a>

Bước 2. Thêm Css

/* Class chung cho tất cả các nút "Neon button" */
.neon-button {
    position: relative;
    display: inline-block;
    padding: 25px 30px;
    margin: 40px 0;
    color: #03e9f4;
    text-decoration: none;
    text-transform: uppercase;
    transition: 0.5s;
    letter-spacing: 4px;
    overflow: hidden;
    margin-right: 50px;
}

/* Hiệu ứng hover chung cho tất cả các nút "Neon button" */
.neon-button:hover {
    background: #03e9f4;
    color: #050801;
    box-shadow: 0 0 5px #03e9f4, 0 0 25px #03e9f4, 0 0 50px #03e9f4, 0 0 200px #03e9f4;
    -webkit-box-reflect: below 1px linear-gradient(transparent, #0005);
}

/* Hiệu ứng cho các nút "Neon button" được xếp hàng ở vị trí thứ nhất */
.neon-button:nth-child(1) {
    filter: hue-rotate(270deg);
}

/* Hiệu ứng cho các nút "Neon button" được xếp hàng ở vị trí thứ hai */
.neon-button:nth-child(2) {
    filter: hue-rotate(110deg);
}

/* Hiệu ứng cho các nút "Neon button" */
.neon-button span {
    position: absolute;
    display: block;
}

/* Hiệu ứng cho các đường neon bên trong nút */
.neon-button span:nth-child(1) {
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #03e9f4);
    animation: animate1 1s linear infinite;
}

.neon-button span:nth-child(2) {
    top: -100%;
    right: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(180deg, transparent, #03e9f4);
    animation: animate2 1s linear infinite;
    animation-delay: 0.25s;
}

.neon-button span:nth-child(3) {
    bottom: 0;
    right: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(270deg, transparent, #03e9f4);
    animation: animate3 1s linear infinite;
    animation-delay: 0.50s;
}

.neon-button span:nth-child(4) {
    bottom: -100%;
    left: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(360deg, transparent, #03e9f4);
    animation: animate4 1s linear infinite;
    animation-delay: 0.75s;
}

/* Keyframes cho các hiệu ứng chạy */
@keyframes animate1 {
    0% {
        left: -100%;
    }
    50%, 100% {
        left: 100%;
    }
}

@keyframes animate2 {
    0% {
        top: -100%;
    }
    50%, 100% {
        top: 100%;
    }
}

@keyframes animate3 {
    0% {
        right: -100%;
    }
    50%, 100% {
        right: 100%;
    }
}

@keyframes animate4 {
    0% {
        bottom: -100%;
    }
    50%, 100% {
        bottom: 100%;
    }
}

Vậy là xong rồi. Thật đơn giản đúng không nào. Hihi hãy theo dõi Chothemewp để học wordpress nâng cao hơn nữa nhé.