CSS button Animation style UI | HTML, CSS & JavaScript

<div class="wrapper">
        
        <div class="card">
            <div class="preview">
                <button class="btn rotate-btn">Rotating Border</button>
            </div>

<div class="code">
                <h3>Rotating Border CSS</h3>
                <pre>
.rotate-btn::before{
  background:conic-gradient(
    #00f7ff,
    #7c3aed,
    #ec4899
  );
}
</pre>
            </div>
        </div>
        
        <div class="card">
            <div class="preview">
                <button class="btn neon-btn">Neon Glow</button>
            </div>

<div class="code">
                <h3>Neon Glow Button CSS</h3>
                <pre>
.neon-btn{
  border:2px solid #00f7ff;
  box-shadow:0 0 10px #00f7ff;
}

.neon-btn:hover{
  box-shadow:0 0 40px #00f7ff;
}
</pre>
            </div>
        </div>

<div class="card">
            <div class="preview">
                <button class="btn wave-btn">Gradient Wave</button>
            </div>

<div class="code">
                <h3>Gradient Wave CSS</h3>
                <pre>
.wave-btn{
  background:linear-gradient(135deg,#7c3aed,#ec4899);
}

.wave-btn::after{
  width:300%;
  height:300%;
}
</pre>
            </div>
        </div>

<div class="card">
            <div class="preview">
                <button class="btn glass-btn">Glass Morph</button>
            </div>

<div class="code">
                <h3>Glass Morph CSS</h3>
                <pre>
.glass-btn{
  backdrop-filter:blur(10px);
  background:rgba(255,255,255,.08);
}
</pre>
            </div>
        </div>

<div class="card">
            <div class="preview">
                <button class="btn liquid-btn">
                    <span>Liquid Slide</span>
                </button>
            </div>

<div class="code">
                <h3>Liquid Slide CSS</h3>
                <pre>
.liquid-btn::before{
  transform:skewX(35deg);
  transition:.6s;
}

.liquid-btn:hover::before{
  left:120%;
}
</pre>
            </div>
        </div>

<div class="card">
            <div class="preview">
                <button class="btn press-btn">3D Press</button>
            </div>

<div class="code">
                <h3>3D Press CSS</h3>
                <pre>
.press-btn{
  box-shadow:
    0 8px 0 #b45309,
    0 15px 20px rgba(0,0,0,.4);
}
</pre>
            </div>
        </div>

<div class="card">
            <div class="preview">
                <button class="btn pulse-btn">Pulse Effect</button>
            </div>

<div class="code">
                <h3>Pulse Animation CSS</h3>
                <pre>
@keyframes pulse{
  0%{
    box-shadow:0 0 0 0 rgba(16,185,129,.7);
  }
}
</pre>
            </div>
        </div>

<div class="card">
            <div class="preview">
                <button class="btn slide-btn">Slide Shine</button>
            </div>

<div class="code">
                <h3>Slide Shine Button CSS</h3>
                <pre>
.slide-btn{
  background:linear-gradient(145deg,#1e293b,#0f172a);
}

.slide-btn::before{
  left:-120%;
  transition:.7s;
}

.slide-btn:hover::before{
  left:130%;
}
</pre>
            </div>
        </div>
    </div>

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    background:#0f172a;
    font-family:Arial, sans-serif;
    color:white;
    padding:25px;
}

h1{
    text-align:center;
    margin-bottom:35px;
    font-size:42px;
}

.wrapper{
    display:flex;
    flex-direction:column;
    gap:35px;
}

.card{
    display:grid;
    grid-template-columns:1fr 1fr;
    background:#111827;
    border-radius:24px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,0.08);
    box-shadow:0 10px 30px rgba(0,0,0,0.4);
}

.preview{
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:260px;
    background:linear-gradient(135deg,#1e293b,#0f172a);
    position:relative;
}

.code{
    background:#020617;
    padding:25px;
    overflow:auto;
}

.code h3{
    margin-bottom:15px;
    color:#38bdf8;
}

pre{
    white-space:pre-wrap;
    color:#cbd5e1;
    line-height:1.6;
    font-size:14px;
}

.btn{
    position:relative;
    padding:18px 34px;
    border:none;
    border-radius:18px;
    color:#fff;
    font-size:18px;
    font-weight:700;
    cursor:pointer;
    overflow:hidden;
    transition:0.4s ease;
}

/* ===================== */
/* 1. Slide Shine */
/* ===================== */
.slide-btn{
    background:linear-gradient(145deg,#1e293b,#0f172a);
    box-shadow:
        8px 8px 18px rgba(0,0,0,.6),
        -4px -4px 10px rgba(255,255,255,.05),
        inset 2px 2px 4px rgba(255,255,255,.08);
}

.slide-btn::before{
    content:"";
    position:absolute;
    top:0;
    left:-120%;
    width:100%;
    height:100%;
    background:linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.35),
        transparent
    );
    transform:skewX(-25deg);
    transition:.7s;
}

.slide-btn:hover::before{
    left:130%;
}

.slide-btn:hover{
    transform:translateY(-5px);
}

/* ===================== */
/* 2. Neon Glow */
/* ===================== */
.neon-btn{
    background:#111827;
    border:2px solid #00f7ff;
    box-shadow:
        0 0 10px #00f7ff,
        inset 0 0 10px rgba(0,247,255,.4);
}

.neon-btn:hover{
    transform:scale(1.05);
    box-shadow:
        0 0 20px #00f7ff,
        0 0 40px #00f7ff;
}

/* ===================== */
/* 3. Gradient Wave */
/* ===================== */
.wave-btn{
    background:linear-gradient(135deg,#7c3aed,#ec4899);
}

.wave-btn::after{
    content:"";
    position:absolute;
    width:300%;
    height:300%;
    background:rgba(255,255,255,.15);
    top:100%;
    left:-100%;
    border-radius:40%;
    transition:1s;
}

.wave-btn:hover::after{
    top:-80%;
}

/* ===================== */
/* 4. Glass Morph */
/* ===================== */
.glass-btn{
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,.15);
    box-shadow:0 8px 20px rgba(0,0,0,.35);
}

.glass-btn:hover{
    background:rgba(255,255,255,.15);
    transform:translateY(-5px);
}

/* ===================== */
/* 5. Liquid Slide */
/* ===================== */
.liquid-btn{
    background:#2563eb;
}

.liquid-btn span{
    position:relative;
    z-index:2;
}

.liquid-btn::before{
    content:"";
    position:absolute;
    top:0;
    left:-40%;
    width:180%;
    height:100%;
    background:rgba(255,255,255,.2);
    transform:skewX(35deg);
    transition:.6s;
}

.liquid-btn:hover::before{
    left:120%;
}

/* ===================== */
/* 6. 3D Press */
/* ===================== */
.press-btn{
    background:#f59e0b;
    box-shadow:
        0 8px 0 #b45309,
        0 15px 20px rgba(0,0,0,.4);
}

.press-btn:hover{
    transform:translateY(3px);
    box-shadow:
        0 4px 0 #b45309,
        0 8px 15px rgba(0,0,0,.35);
}

/* ===================== */
/* 7. Pulse Button */
/* ===================== */
.pulse-btn{
    background:#10b981;
    animation:pulse 2s infinite;
}

@keyframes pulse{
    0%{
        box-shadow:0 0 0 0 rgba(16,185,129,.7);
    }
    70%{
        box-shadow:0 0 0 18px rgba(16,185,129,0);
    }
    100%{
        box-shadow:0 0 0 0 rgba(16,185,129,0);
    }
}

/* ===================== */
/* 8. Rotating Border */
/* ===================== */
.rotate-btn{
    position:relative;
    padding:18px 40px;
    border:none;
    border-radius:20px;
    background:#111827;
    color:#fff;
    font-size:20px;
    font-weight:700;
    cursor:pointer;
    z-index:1;
    overflow:hidden;
}

/* ROTATING BORDER */
.rotate-btn::before{
    content:"";
    position:absolute;
    inset:-4px;
    border-radius:22px;

background:conic-gradient(
        #00f7ff,
        #7c3aed,
        #ec4899,
        #00f7ff
    );

animation:spin 3s linear infinite;
    z-index:-2;
}

/* INNER BACKGROUND */
.rotate-btn::after{
    content:"";
    position:absolute;
    inset:3px;
    background:#111827;
    border-radius:18px;
    z-index:-1;
}

@keyframes spin{
    100%{
        transform:rotate(360deg);
    }
}

.rotate-btn:hover{
    transform:scale(1.05);
}

- CSS button Animation style UI

Live Preview