सीएसएस चमकते बटन

2196 Andev.web

संपादक में खोलें Video अपना कोड प्रकाशित करें

अनुशंसित

28 July 2023

नेविगेशन होवर प्रभाव शुद्ध सीएसएस

28 April 2024

एनिमेटेड HTML बटन

HTML

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}

body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #151F28;
    flex-direction: column;
    gap: 50px; 
}

a{
    position: relative;
    background: #fff;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 1.5rem;
    letter-spacing: 0.1em;
    font-weight: 400;
    padding: 10px 30px;
    transition: 0.5s;
}

a:hover{
    background: var(--clr);
    color: var(--clr);
    letter-spacing: 0.25em;
    box-shadow: 0 0 35px var(--clr);
}

a::before{
    content: '';
    position: absolute;
    inset: 2px;
    background: #151F28;
}

a span{
    position: relative;
    z-index: 1;
}

a i{
    position: absolute;
    inset: 0;
    display: block;
}

a i::before{
    content: '';
    position: absolute;
    top: 0;
    left: 80%;
    width: 10px;
    height: 4px;
    background: #151F28;
    transform: translateX(-50%) skewX(325deg);
    transition: 0.5s;
}

a:hover i::before{
    width: 20px;
    left: 20%;
}

a i::after{
    content: '';
    position: absolute;
    bottom: 0;
    left: 20%;
    width: 10px;
    height: 4px;
    background: #151F28;
    transform: translateX(-50%) skewX(325deg);
    transition: 0.5s;
}

a:hover i::after{
    width: 20px;
    left: 80%;
}

सीएसएस चमकते बटन

अनुशंसित

सीएसएस टेक्स्ट कलर एनिमेशन

नेविगेशन होवर प्रभाव शुद्ध सीएसएस

एनिमेटेड HTML बटन

HTML

CSS

JS

अनुशंसित

सीएसएस टेक्स्ट कलर एनिमेशन

नेविगेशन होवर प्रभाव शुद्ध सीएसएस

एनिमेटेड HTML बटन

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS