Back to Discover

Animated Close Buttons in CSS

Anna

Created Nov 13, 2025

196 views

1 likes

0 comments

0 forks

Export Fork Like

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Animated Close Buttons</title>

  <div class="header">
    <h1>✖️ Animated Close Buttons</h1>
    <p>Beautiful close button designs with smooth animations</p>
  </div>

  <div class="container">
    <div class="grid">
      <div class="button-card">
        <div class="button-title">Classic Rotate</div>
        <button class="close-btn-1"></button>
      </div>

      <div class="button-card">
        <div class="button-title">Rotating Border</div>
        <button class="close-btn-2"></button>
      </div>

      <div class="button-card">
        <div class="button-title">Pulse Effect</div>
        <button class="close-btn-3"></button>
      </div>

      <div class="button-card">
        <div class="button-title">Scale & Expand</div>
        <button class="close-btn-4"></button>
      </div>

      <div class="button-card">
        <div class="button-title">Slide Lines</div>
        <button class="close-btn-5"></button>
      </div>

      <div class="button-card">
        <div class="button-title">3D Flip</div>
        <button class="close-btn-6"></button>
      </div>

      <div class="button-card">
        <div class="button-title">Bounce</div>
        <button class="close-btn-7"></button>
      </div>

      <div class="button-card">
        <div class="button-title">Glow Effect</div>
        <button class="close-btn-8"></button>
      </div>

      <div class="button-card">
        <div class="button-title">Morphing Shape</div>
        <button class="close-btn-9"></button>
      </div>

      <div class="button-card">
        <div class="button-title">Split & Slide</div>
        <button class="close-btn-10"></button>
      </div>

      <div class="button-card">
        <div class="button-title">Ripple Wave</div>
        <button class="close-btn-11"></button>
      </div>

      <div class="button-card">
        <div class="button-title">Shake</div>
        <button class="close-btn-12"></button>
      </div>
    </div>
  </div>

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

    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background: linear-gradient(135deg, #5f0f40 0%, #9a1750 100%);
      min-height: 100vh;
      padding: 40px 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .header {
      text-align: center;
      color: white;
      margin-bottom: 50px;
      animation: fadeInDown 0.8s ease;
    }

    .header h1 {
      font-size: 2.8rem;
      font-weight: 700;
      margin-bottom: 10px;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    }

    .header p {
      font-size: 1.1rem;
      opacity: 0.95;
    }

    @keyframes fadeInDown {
      from {
        opacity: 0;
        transform: translateY(-30px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .container {
      max-width: 1400px;
      width: 100%;
    }

    .grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 30px;
      margin-bottom: 30px;
    }

    .button-card {
      background: white;
      border-radius: 16px;
      padding: 40px;
      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20px;
      animation: fadeInUp 0.6s ease;
      animation-fill-mode: backwards;
    }

    .button-card:nth-child(1) { animation-delay: 0.1s; }
    .button-card:nth-child(2) { animation-delay: 0.2s; }
    .button-card:nth-child(3) { animation-delay: 0.3s; }
    .button-card:nth-child(4) { animation-delay: 0.4s; }
    .button-card:nth-child(5) { animation-delay: 0.5s; }
    .button-card:nth-child(6) { animation-delay: 0.6s; }
    .button-card:nth-child(7) { animation-delay: 0.7s; }
    .button-card:nth-child(8) { animation-delay: 0.8s; }
    .button-card:nth-child(9) { animation-delay: 0.9s; }

    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(30px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .button-title {
      font-size: 1.1rem;
      color: #2c3e50;
      font-weight: 700;
      text-align: center;
    }

    /* Close Button 1: Classic X */
    .close-btn-1 {
      width: 60px;
      height: 60px;
      background: #5f0f40;
      border: none;
      border-radius: 50%;
      cursor: pointer;
      position: relative;
      transition: all 0.3s ease;
      box-shadow: 0 4px 15px rgba(95, 15, 64, 0.3);
    }

    .close-btn-1::before,
    .close-btn-1::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 24px;
      height: 3px;
      background: white;
      transition: all 0.3s ease;
    }

    .close-btn-1::before {
      transform: translate(-50%, -50%) rotate(45deg);
    }

    .close-btn-1::after {
      transform: translate(-50%, -50%) rotate(-45deg);
    }

    .close-btn-1:hover {
      background: #9a1750;
      transform: rotate(90deg) scale(1.1);
      box-shadow: 0 6px 25px rgba(95, 15, 64, 0.5);
    }

    /* Close Button 2: Rotating X */
    .close-btn-2 {
      width: 60px;
      height: 60px;
      background: transparent;
      border: 3px solid #5f0f40;
      border-radius: 50%;
      cursor: pointer;
      position: relative;
      transition: all 0.4s ease;
    }

    .close-btn-2::before,
    .close-btn-2::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 24px;
      height: 3px;
      background: #5f0f40;
      transition: all 0.4s ease;
    }

    .close-btn-2::before {
      transform: translate(-50%, -50%) rotate(45deg);
    }

    .close-btn-2::after {
      transform: translate(-50%, -50%) rotate(-45deg);
    }

    .close-btn-2:hover {
      background: #5f0f40;
      transform: rotate(180deg);
      border-color: #5f0f40;
    }

    .close-btn-2:hover::before,
    .close-btn-2:hover::after {
      background: white;
    }

    /* Close Button 3: Pulse Effect */
    .close-btn-3 {
      width: 60px;
      height: 60px;
      background: #5f0f40;
      border: none;
      border-radius: 12px;
      cursor: pointer;
      position: relative;
      transition: all 0.3s ease;
    }

    .close-btn-3::before,
    .close-btn-3::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 24px;
      height: 3px;
      background: white;
      transition: all 0.3s ease;
    }

    .close-btn-3::before {
      transform: translate(-50%, -50%) rotate(45deg);
    }

    .close-btn-3::after {
      transform: translate(-50%, -50%) rotate(-45deg);
    }

    .close-btn-3:hover {
      animation: pulse 0.6s ease;
      box-shadow: 0 0 0 15px rgba(95, 15, 64, 0);
    }

    @keyframes pulse {
      0% {
        box-shadow: 0 0 0 0 rgba(95, 15, 64, 0.7);
      }
      100% {
        box-shadow: 0 0 0 20px rgba(95, 15, 64, 0);
      }
    }

    /* Close Button 4: Scale & Fade */
    .close-btn-4 {
      width: 60px;
      height: 60px;
      background: linear-gradient(135deg, #5f0f40 0%, #9a1750 100%);
      border: none;
      border-radius: 50%;
      cursor: pointer;
      position: relative;
      transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
      box-shadow: 0 4px 15px rgba(95, 15, 64, 0.3);
    }

    .close-btn-4::before,
    .close-btn-4::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 24px;
      height: 3px;
      background: white;
      transition: all 0.3s ease;
    }

    .close-btn-4::before {
      transform: translate(-50%, -50%) rotate(45deg);
    }

    .close-btn-4::after {
      transform: translate(-50%, -50%) rotate(-45deg);
    }

    .close-btn-4:hover {
      transform: scale(1.3);
      box-shadow: 0 8px 30px rgba(95, 15, 64, 0.5);
    }

    .close-btn-4:hover::before {
      width: 30px;
    }

    .close-btn-4:hover::after {
      width: 30px;
    }

    /* Close Button 5: Slide Lines */
    .close-btn-5 {
      width: 60px;
      height: 60px;
      background: white;
      border: 3px solid #5f0f40;
      border-radius: 50%;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: all 0.3s ease;
    }

    .close-btn-5::before,
    .close-btn-5::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 0;
      height: 3px;
      background: #5f0f40;
      transition: all 0.4s ease;
    }

    .close-btn-5::before {
      transform: translate(-50%, -50%) rotate(45deg);
    }

    .close-btn-5::after {
      transform: translate(-50%, -50%) rotate(-45deg);
    }

    .close-btn-5:hover {
      background: #5f0f40;
      border-color: #5f0f40;
    }

    .close-btn-5:hover::before,
    .close-btn-5:hover::after {
      width: 24px;
      background: white;
    }

    /* Close Button 6: 3D Flip */
    .close-btn-6 {
      width: 60px;
      height: 60px;
      background: #5f0f40;
      border: none;
      border-radius: 10px;
      cursor: pointer;
      position: relative;
      transition: all 0.5s ease;
      transform-style: preserve-3d;
    }

    .close-btn-6::before,
    .close-btn-6::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 24px;
      height: 3px;
      background: white;
      transition: all 0.3s ease;
    }

    .close-btn-6::before {
      transform: translate(-50%, -50%) rotate(45deg);
    }

    .close-btn-6::after {
      transform: translate(-50%, -50%) rotate(-45deg);
    }

    .close-btn-6:hover {
      transform: rotateY(180deg);
      background: #9a1750;
    }

    /* Close Button 7: Bounce */
    .close-btn-7 {
      width: 60px;
      height: 60px;
      background: #5f0f40;
      border: none;
      border-radius: 50%;
      cursor: pointer;
      position: relative;
      transition: all 0.3s ease;
    }

    .close-btn-7::before,
    .close-btn-7::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 24px;
      height: 3px;
      background: white;
    }

    .close-btn-7::before {
      transform: translate(-50%, -50%) rotate(45deg);
    }

    .close-btn-7::after {
      transform: translate(-50%, -50%) rotate(-45deg);
    }

    .close-btn-7:hover {
      animation: bounce 0.6s ease;
    }

    @keyframes bounce {
      0%, 100% { transform: scale(1); }
      25% { transform: scale(0.9); }
      50% { transform: scale(1.15); }
      75% { transform: scale(0.95); }
    }

    /* Close Button 8: Glow */
    .close-btn-8 {
      width: 60px;
      height: 60px;
      background: #5f0f40;
      border: none;
      border-radius: 50%;
      cursor: pointer;
      position: relative;
      transition: all 0.3s ease;
    }

    .close-btn-8::before,
    .close-btn-8::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 24px;
      height: 3px;
      background: white;
      transition: all 0.3s ease;
    }

    .close-btn-8::before {
      transform: translate(-50%, -50%) rotate(45deg);
    }

    .close-btn-8::after {
      transform: translate(-50%, -50%) rotate(-45deg);
    }

    .close-btn-8:hover {
      box-shadow: 0 0 20px #5f0f40,
                  0 0 40px #5f0f40,
                  0 0 60px #5f0f40;
      transform: scale(1.1);
    }

    /* Close Button 9: Morphing Circle */
    .close-btn-9 {
      width: 60px;
      height: 60px;
      background: #5f0f40;
      border: none;
      border-radius: 50%;
      cursor: pointer;
      position: relative;
      transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    }

    .close-btn-9::before,
    .close-btn-9::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 24px;
      height: 3px;
      background: white;
      transition: all 0.4s ease;
    }

    .close-btn-9::before {
      transform: translate(-50%, -50%) rotate(45deg);
    }

    .close-btn-9::after {
      transform: translate(-50%, -50%) rotate(-45deg);
    }

    .close-btn-9:hover {
      border-radius: 10px;
      transform: rotate(90deg);
      background: #9a1750;
    }

    /* Close Button 10: Split & Slide */
    .close-btn-10 {
      width: 60px;
      height: 60px;
      background: #5f0f40;
      border: none;
      border-radius: 50%;
      cursor: pointer;
      position: relative;
      transition: all 0.3s ease;
      overflow: hidden;
    }

    .close-btn-10::before,
    .close-btn-10::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 24px;
      height: 3px;
      background: white;
      transition: all 0.4s ease;
    }

    .close-btn-10::before {
      transform: translate(-50%, -50%) rotate(45deg);
    }

    .close-btn-10::after {
      transform: translate(-50%, -50%) rotate(-45deg);
    }

    .close-btn-10:hover::before {
      transform: translate(-100%, -50%) rotate(45deg);
    }

    .close-btn-10:hover::after {
      transform: translate(0%, -50%) rotate(-45deg);
    }

    .close-btn-10:hover {
      background: #9a1750;
    }

    /* Close Button 11: Ripple Effect */
    .close-btn-11 {
      width: 60px;
      height: 60px;
      background: #5f0f40;
      border: none;
      border-radius: 50%;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }

    .close-btn-11::before,
    .close-btn-11::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 24px;
      height: 3px;
      background: white;
      z-index: 2;
    }

    .close-btn-11::before {
      transform: translate(-50%, -50%) rotate(45deg);
    }

    .close-btn-11::after {
      transform: translate(-50%, -50%) rotate(-45deg);
    }

    .close-btn-11:hover::before {
      animation: ripple 0.6s ease;
    }

    @keyframes ripple {
      0% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
      }
      100% {
        box-shadow: 0 0 0 30px rgba(255, 255, 255, 0);
      }
    }

    /* Close Button 12: Shake */
    .close-btn-12 {
      width: 60px;
      height: 60px;
      background: #5f0f40;
      border: none;
      border-radius: 50%;
      cursor: pointer;
      position: relative;
    }

    .close-btn-12::before,
    .close-btn-12::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 24px;
      height: 3px;
      background: white;
    }

    .close-btn-12::before {
      transform: translate(-50%, -50%) rotate(45deg);
    }

    .close-btn-12::after {
      transform: translate(-50%, -50%) rotate(-45deg);
    }

    .close-btn-12:hover {
      animation: shake 0.5s ease;
      background: #9a1750;
    }

    @keyframes shake {
      0%, 100% { transform: translateX(0); }
      10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
      20%, 40%, 60%, 80% { transform: translateX(5px); }
    }

    @media (max-width: 768px) {
      .header h1 {
        font-size: 2rem;
      }

      .grid {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 20px;
      }

      .button-card {
        padding: 30px;
      }
    }