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

अनुशंसित

21 October 2024

सीएसएस के साथ एक द्विघात लूप

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