Components Library

Search components, preview them, and copy source code.

MACUI code v1.0

A MACUI mega code with resposive design

Preview Mega Code

Loading screen

CSS Fonts (Lilita One, Momo Trust Display, Outfit, Gabarito, Luckiest Guy)

Grids CSS code

Radius Code

HTML 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>MACUI</title>
  <!-- CSS Link -->
  <link rel="stylesheet" href="#">
  <!--[favicon]-->
  <link rel="icon" type="image/x-icon" href="#">
  <!--[font]-->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link
    href="https://fonts.googleapis.com/css2?family=Lilita+One&family=Momo+Trust+Display&family=Outfit:wght@100..900&display=swap"
    rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Gabarito:wght@400..900&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Luckiest+Guy&display=swap" rel="stylesheet">
  <!--[Icon]-->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css"
    integrity="sha512-2SwdPD6INVrV/lHTZbO2nodKhrnDdJK9/kg2XD1r9uGqPo1cUbujc+IYdlYdEErWNu69gVcYgdxlmVmzTWnetw=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>

<body>
  <!-- Script -->
  <script>
    window.addEventListener("load", function () {
      const loader = document.getElementById("loader");
      if (loader) {
        setTimeout(() => {
          loader.style.opacity = "0";
          setTimeout(() => {
            loader.style.display = "none";
          }, 400);
        }, 1000); // 1 sec delay
      }
    });
  </script>

  <!-- MACUI Loader -->
  <div id="loader">
    <div class="loader">
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
    </div>
  </div>

  <!-- Add your content below -->

</body>
</html>
CSS 
* {
    font-family: "Gabarito", sans-serif;
    font-weight: 400;
    scroll-behavior: smooth;
    margin: 0;
    padding: 0;
}

body {
    overflow-x: hidden;
}

.font-1 {
    font-family: "Momo Trust Display", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.font-2 {
    font-family: "Lilita One", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.font-3 {
    font-family: "Outfit", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

.font-4 {
    font-family: "Gabarito", sans-serif;
    font-optical-sizing: auto;
    font-weight: 4000;
    font-style: normal;
}

.font-5 {
    font-family: "Luckiest Guy", cursive;
    font-weight: 400;
    font-style: normal;
}

a,
button,
summary,
label,
details {
    -webkit-tap-highlight-color: transparent;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.radius {
    corner-shape: squircle;
}

.grids {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-gap: 1rem;
}

.grid {
    padding: 1px;
}

@media (min-width: 900px) {
    .grids {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 600px) {
    .grids {
        grid-template-columns: repeat(2, 1fr);
    }
}

.grids-3 {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-gap: 1rem;
}

.grid-3 {
    padding: 1px;
}

@media (min-width: 900px) {
    .grids-3 {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 600px) {
    .grids-3 {
        grid-template-columns: repeat(3, 1fr);
    }
}

.grids-4 {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-gap: 1rem;
}

.grid-4 {
    padding: 1px;
}

@media (min-width: 900px) {
    .grids-4 {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 600px) {
    .grids-4 {
        grid-template-columns: repeat(4, 1fr);
    }
}

#loader {
    position: fixed;
    width: 100%;
    height: 100%;
    background: #ebebeb9a;
    backdrop-filter: blur(25px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.4s ease;
}

/* From Uiverse.io by AbanoubMagdy1 */
.loader {
    --dim: 3rem;
    width: var(--dim);
    height: var(--dim);
    position: relative;
    animation: spin988 2s linear infinite;
}

.loader .circle {
    --color: #333;
    --dim: 1.2rem;
    width: var(--dim);
    height: var(--dim);
    background-color: var(--color);
    border-radius: 50%;
    position: absolute;
}

.loader .circle:nth-child(1) {
    top: 0;
    left: 0;
}

.loader .circle:nth-child(2) {
    top: 0;
    right: 0;
}

.loader .circle:nth-child(3) {
    bottom: 0;
    left: 0;
}

.loader .circle:nth-child(4) {
    bottom: 0;
    right: 0;
}

@keyframes spin988 {
    0% {
        transform: scale(1) rotate(0);
    }

    20%,
    25% {
        transform: scale(1.3) rotate(90deg);
    }

    45%,
    50% {
        transform: scale(1) rotate(180deg);
    }

    70%,
    75% {
        transform: scale(1.3) rotate(270deg);
    }

    95%,
    100% {
        transform: scale(1) rotate(360deg);
    }
}
JS 
Already included in HTML Code

Navbar v1.0

A modern glass effect Navbar component.

Preview Navbar
HTML 
<!-- MACUI Navbar v1.0 -->
  <nav class="navbar">
    <div style="display: flex; align-items: center; gap: 10px;">
      <img style="width: 40px; border-radius: 10px;"
        src="https://blogger.googleusercontent.com/img/a/AVvXsEgz7-UcxUZ4dHEhcgpvCB9_TSq1EJMwvp5HS0fCVLGp6znv9tToEdh7UGHcKlgQiZa1_3Qs0skw60JmyMFhU62WzBlYI-UyuZ5twc_MrUNiw5FlBiX3xEiyGb8zr-w4liXf0J4DxTgOvTISTeF6frgfUOc6pH2l2xnhx0UkAhTNui_UNMLy-RJKAO1m6bV3=w150-h150-p-k-no-nu-rw-e90"
        alt="">
      <a href="#home" class="logo">MACUI</a>
    </div>
    <ul class="desktop-links">
      <li><a href="#home" class="active-link">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#services">Services</a></li>
      <li><a href="#work">Work</a></li>
      <li><a class="nav-btn" href="#contact">Contact</a></li>
    </ul>
    <button class="menu-btn" onclick="openMobileMenu()" aria-label="Open menu">
      <p style="color: white; font-size:20px;"><i class="fa-solid fa-grip-lines"></i></p>
    </button>
  </nav>
  <div id="mobileMenu" class="mobile-modal">
    <div class="mobile-modal-content">
      <div class="mobile-modal-top">
        <div class="mobile-modal-title">Menu</div>
        <button class="close-btn" onclick="closeMobileMenu()" aria-label="Close menu">
          &times;
        </button>
      </div>
      <ul class="mobile-links">
        <li><a href="#home" class="active-link">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#services">Services</a></li>
        <li><a href="#work">Work</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div>
  </div>
CSS 
.navbar {
    position: fixed;
    top: 22px;
    left: 50%;
    transform: translateX(-50%);
    width: min(1120px, calc(100% - 32px));
    height: 72px;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 18px;
    border: 1px solid rgba(56, 56, 56, 0.24);
    background: rgb(225, 227, 255);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    box-shadow: 0 20px 45px rgba(93, 93, 93, 0.2);
    z-index: 1000;
}

.logo {
    color: #000000;
    text-decoration: none;
    font-size: 24px;
    font-weight: 800;
}

.desktop-links {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav-btn {
    background-color: #c6b8f2;
}

.desktop-links a {
    height: 42px;
    padding: 0 16px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #000000;
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    transition: 0.3s ease;
}

.desktop-links a:hover {
    background: rgba(62, 62, 62, 0.18);
}

.menu-btn {
    display: none;
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    background-color: #000000;
    border: 2px solid black;
    position: relative;
}

.menu-btn span,
.menu-btn span::before,
.menu-btn span::after {
    width: 22px;
    height: 2px;
    background: #ffffff;
    position: absolute;
    left: 50%;
    content: "";
    transform: translateX(-50%);
    transition: 0.3s ease;
}

.menu-btn span {
    top: 50%;
}

.menu-btn span::before {
    top: -7px;
}

.menu-btn span::after {
    top: 7px;
}

.mobile-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(21, 23, 30, 0.208);
    backdrop-filter: blur(14px) saturate(170%);
    -webkit-backdrop-filter: blur(14px) saturate(170%);
    opacity: 0;
    visibility: hidden;
    transition: 0.35s ease;
}

.mobile-modal.active {
    opacity: 1;
    visibility: visible;
}

.mobile-modal-content {
    width: min(420px, 100%);
    padding: 28px;
    border-radius: 28px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    background: rgba(255, 255, 255, 0.14);
    box-shadow:
        0 28px 80px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
    transform: translateY(18px) scale(0.96);
    transition: 0.35s ease;
}

.mobile-modal.active .mobile-modal-content {
    transform: translateY(0) scale(1);
}

.mobile-modal-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px;
}

.mobile-modal-title {
    color: #ffffff;
    font-size: 22px;
    font-weight: 800;
}

.close-btn {
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
}

.mobile-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mobile-links a {
    width: 100%;
    height: 56px;
    padding: 0 18px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    color: #ffffff;
    text-decoration: none;
    font-size: 18px;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.12);
    transition: 0.3s ease;
}

.mobile-links a:hover {
    background: rgba(255, 255, 255, 0.22);
    transform: translateX(4px);
}

.mobile-links .active-link {
    background: #ffffff;
    color: #111827;
}

.hero {
    min-height: 100vh;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 130px 24px 40px;
}

.hero h1 {
    max-width: 900px;
    font-size: clamp(42px, 8vw, 86px);
    line-height: 1;
}

@media (max-width: 768px) {
    .navbar {
        top: 16px;
        width: calc(100% - 28px);
        height: 66px;
        padding: 0 14px 0 20px;
        border-radius: 18px;
    }

    .desktop-links {
        display: none;
    }

    .menu-btn {
        display: block;
    }

    .mobile-modal {
        padding: 0;
    }

    .mobile-modal-content {
        width: 100%;
        min-height: 100vh;
        border-radius: 0;
        padding: 26px 22px;
        background: rgba(15, 23, 42, 0.68);
        backdrop-filter: blur(28px) saturate(180%);
        -webkit-backdrop-filter: blur(28px) saturate(180%);
    }

    .mobile-modal-top {
        margin-bottom: 48px;
    }

    .mobile-links {
        gap: 16px;
    }

    .mobile-links a {
        height: 62px;
        border-radius: 18px;
        font-size: 22px;
    }
}

@media (min-width: 769px) {
    .mobile-modal {
        display: none;
    }
}
JS 
<script>
    const mobileMenu = document.getElementById("mobileMenu");
    const mobileLinks = document.querySelectorAll(".mobile-links a");

    function openMobileMenu() {
      mobileMenu.classList.add("active");
    }

    function closeMobileMenu() {
      mobileMenu.classList.remove("active");
    }

    mobileMenu.addEventListener("click", function (event) {
      if (event.target === mobileMenu) {
        closeMobileMenu();
      }
    });

    mobileLinks.forEach(function (link) {
      link.addEventListener("click", closeMobileMenu);
    });
  </script>

Loading Screen

A glass effect Loading Screen with simple responsive layout.

Preview Loader

Custom Loading screen

Explore loading screen
HTML 
<!-- MACUI Loader -->
  <div id="loader">
    <p>Loading...</p> 
    <!-- Add your loader code below -->
  </div>
CSS 
    #loader {
      position: fixed;
      width: 100%;
      height: 100%;
      background: #ebebeb9a;
      backdrop-filter: blur(25px);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 9999;
      transition: opacity 0.4s ease;
    }
JS 
  <script>
    window.addEventListener("load", function () {
      const loader = document.getElementById("loader");
      if (loader) {
        setTimeout(() => {
          loader.style.opacity = "0";
          setTimeout(() => {
            loader.style.display = "none";
          }, 400);
        }, 1000); // 1 sec delay
      }
    });
  </script>

Custom Cursor

A Custom Dot cursor with hover effect.

Preview Cursor

Custom Dot Cursor

View Demo
HTML 
 <!-- MACUI Custom Cursor v1.0 -->
    <div class="custom-cursor" aria-hidden="true">
    <span>Move</span>
  </div>
CSS 

.custom-cursor {
    position: fixed;
    left: 0;
    top: 0;
    width: 13px;
    height: 13px;
    display: none;
    align-items: center;
    justify-content: center;
    border: 2px solid black;
    border-radius: 50%;
    background: #000000;
    color: #000000;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
    transition: width 0.2s ease, height 0.2s ease, opacity 0.2s ease,
        background 0.2s ease, color 0.2s ease, transform 0.12s ease;
    z-index: 10000;
}

.custom-cursor span {
    font-size: 8px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
    background: transparent;
}

.custom-cursor.is-visible {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.custom-cursor.is-hovering {
    width: 13px;
    height: 13px;
    background: #8f5ee3;
    color: #ffffff;
    z-index: 1000;
}

@media (hover: hover) and (pointer: fine) {

    body,
    body * {
        cursor: none !important;
    }

    .custom-cursor {
        display: flex;
    }
}
JS 
<script>
    document.addEventListener("DOMContentLoaded", () => {
      const cursor = document.querySelector(".custom-cursor");
      const cursorText = cursor ? cursor.querySelector("span") : null;
      const canUseCustomCursor = window.matchMedia("(hover: hover) and (pointer: fine)").matches;

      if (cursor && cursorText && canUseCustomCursor) {
        window.addEventListener("mousemove", (event) => {
          cursor.style.left = `${event.clientX}px`;
          cursor.style.top = `${event.clientY}px`;
          cursor.classList.add("is-visible");
        });

        window.addEventListener("mouseleave", () => {
          cursor.classList.remove("is-visible");
        });

        document.addEventListener("mouseover", (event) => {
          const hoverTarget = event.target.closest("a, button");

          if (hoverTarget && !hoverTarget.classList.contains("custom-cursor")) {
            cursor.classList.add("is-hovering");
            cursorText.textContent = hoverTarget.matches("a, button") ? "C" : "V";
          } else {
            cursor.classList.remove("is-hovering");
            cursorText.textContent = "M";
          }
        });
      }
    });

    document.addEventListener('click', function (event) {
      document.querySelectorAll('.dropdown').forEach(dropdown => {
        if (!dropdown.contains(event.target)) {
          dropdown.removeAttribute('open');
        }
      });
    });

  </script>

Hero Section v1.0

A Hero page with responsive design.

Preview Hero Section

Build a beautiful UI design with MACUI

We use the latest technologies to create the best user experience. Use MACUI for your next project and see the difference.

HTML 
  <!-- Hero section -->
  <div class="hero-section">
    <div class="left-hero">
      <p class="font-5 hero-text">Build a beautiful UI design with MACUI</p>
      <p>We use the latest technologies to create the best user experience. Use MACUI for your next project and see the
        difference.</p>
      <button class="hero-btn radius"><a target="_blank" href="#">Get Started</a></button>
    </div>
    <div class="right-hero">
      <img class="hero-img radius" src="https://i.pinimg.com/1200x/4c/aa/f9/4caaf99d85ff6e09bb0a24eae2e67b9f.jpg"
        alt="">
    </div>
  </div>
CSS 

.hero-text {
    font-size: 55px;
    margin-bottom: 0;
    font-weight: 500;
    letter-spacing: 1px;
    color: #351659;
}

.hero-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 100px;
    padding: 8% 10%;
}

.left-hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
}

.right-hero {
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-btn {
    background-color: rgb(74, 46, 128);
    border-radius: 200px;
    color: white;
    padding: 10px 20px;
    font-weight: 500;
    transition: all 0.3s ease-in-out;
    width: fit-content;
    border: none;
}

.hero-btn a {
    color: white;
    text-decoration: none;
    font-size: 16px;
}

.hero-btn:hover {
    box-shadow: 4px 4px black;
    transform: translateY(-2px);
}

.hero-img {
    width: 100%;
    border-radius: 80px;
}

@media (max-width: 768px) {
    .hero-section {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .hero-text {
        font-size: 40px;
    }
}
JS 
No JS Required

Modal Box

A Modal Box with responsive design.

Preview Modal Box
HTML 
<!-- Buttons to open modals -->
  <button class="button" onclick="openModal('modal1')">Open Modal 1</button>
  <button class="button" onclick="openModal('modal2')">Open Modal 2</button>

  <!-- Modal 1 -->
  <div id="modal1" class="modal">
    <div class="modal-content">
      <button class="close" onclick="closeModal('modal1')">Close</button>
      <h2>Modal 1</h2>
      <p>This is the content inside the first modal.</p>
    </div>
  </div>

  <!-- Modal 2 -->
  <div id="modal2" class="modal">
    <div class="modal-content">
      <button class="close" onclick="closeModal('modal2')">&times;</button>
      <h2>Modal 2</h2>
      <p>This is the content inside the second modal.</p>
    </div>
  </div>
CSS 
.button {
    background-color: #7e51e8;
    color: white;
    padding: 10px 20px;
    margin: 10px 10px 30px 0;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.button:hover {
    box-shadow: 4px 4px black;
    transform: translateY(-2px);
}

.modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background-color: rgba(98, 112, 138, 0.6);
    backdrop-filter: blur(8px);
    z-index: 1000;
    transition: opacity 0.3s ease;
}

.modal.show {
    display: flex;
}

/* Modal Content Box */
.modal-content {
    background: rgba(57, 57, 57, 0.412);
    border: 1px solid rgba(41, 41, 41, 0.471);
    color: white;
    padding: 24px;
    border-radius: 24px;
    width: 80%;
    box-shadow: 0 8px 30px rgba(82, 82, 82, 0.5);
    transform: scale(0.95);
    opacity: 0;
    transition: all 0.2s ease;
    position: relative;
}

.modal.show .modal-content {
    transform: scale(1);
    opacity: 1;
}

.close {
    position: absolute;
    top: 12px;
    right: 16px;
    font-size: 15px;
    color: #fff;
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.2s ease;
    border: 1px solid rgb(86, 86, 86);
    padding: 10px;
    border-radius: 20px;
}

.close:hover {
    background-color: black;
    border-radius: 20px;
}
JS 
  <script>
    function openModal(id) {
      document.getElementById(id).style.display = "flex";
    }

    function closeModal(id) {
      document.getElementById(id).style.display = "none";
    }

    document.addEventListener("click", function (event) {
      const modal = document.getElementById("modal2");
      const modalContent = modal.querySelector(".modal-content");

      if (event.target === modal) {
        closeModal("modal2");
      }

      if (modalContent.contains(event.target) && event.target.tagName === "A") {
        closeModal("modal2");
      }
    });
    function openModal(id) {
      const modal = document.getElementById(id);
      modal.classList.add('show');
      document.body.classList.add('no-scroll'); // 🔒 Disable scroll
    }

    function closeModal(id) {
      const modal = document.getElementById(id);
      const content = modal.querySelector('.modal-content');
      content.style.transform = 'scale(0.95)';
      content.style.opacity = '0';

      setTimeout(() => {
        modal.classList.remove('show');
        document.body.classList.remove('no-scroll'); // 🔓 Enable scroll
        content.style.transform = '';
        content.style.opacity = '';
      }, 300);
    }

    // Close on outside click
    window.addEventListener('click', function (e) {
      document.querySelectorAll('.modal').forEach(modal => {
        if (!modal.classList.contains('show')) return;
        if (e.target === modal) {
          closeModal(modal.id);
        }
      });
    });

    // Close on ESC key
    document.addEventListener('keydown', function (e) {
      if (e.key === 'Escape') {
        document.querySelectorAll('.modal.show').forEach(modal => {
          closeModal(modal.id);
        });
      }
    });
  </script>

Code Box

A code box with copy button

Preview Code Box

HTML Code

<p>This is code</p>
HTML 
<!-- Copy Notification -->
<div id="new-toast" class="new-toast"></div>
  <!-- Code Box 1 -->
<div class="code-container">
  <div class="code-header">
    <h3>HTML Code</h3>
    <button class="copy-button" data-target="code-content1">
      <svg xmlns="http://www.w3.org/2000/svg" class="copy-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
        <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
      </svg>
    </button>
  </div>
   <!--Add Your Parse HTML, CSS and Js code Here-->
  <div id="code-content1" class="code-block">
    <pre>&lt;p&gt;This is code&lt;/p&gt;</pre>
  </div>
</div>
CSS 
.code-container {
  position: relative;
  background: #ededed;
  border: 1px solid #8d8d8d;
  border-radius: 18px;
  padding: 10px;
  margin: 20px 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.code-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 8px;
  border-bottom: 1px solid #767676;
}

.code-header h3 {
  margin: 0;
  font-size: 1.2rem;
  font-family: system-ui;
  font-weight: 700;
  color: #333;
}

.copy-button {
  background-color: transparent;
  border: 1px solid #727272;
  border-radius: 4px;
  cursor: pointer;
  padding: 5px;
  transition: background-color 0.3s ease, border-color 0.3s ease;
  display: flex;
  align-items: center;
}

.copy-button:hover {
  background-color: #cecece;
  border-color: #ccc;
}

.copy-button.copied {
  background-color: #30303098;
  backdrop-filter: blur(15px);
  border-color: #2d2d2d;
  color: #fff;
}

.copy-icon {
  width: 18px;
  height: 18px;
  color: currentColor;
}

.code-block {
  padding: 10px;
  border-radius: 4px;
  font-family: 'Courier New', monospace;
  font-size: 0.9rem;
  color: #333333;
  overflow-x: auto;
  margin-top: 5px;
}

.new-toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333333a3;
  backdrop-filter: blur(15px);
  color: white;
  padding: 12px 20px;
  font-size: 1rem;
  border-radius: 50px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0s 0.5s;
  z-index: 9999;
}

.new-toast.show {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s ease;
}

.new-toast.success {
  background-color: #323232a0;
  backdrop-filter: blur(15px);
}

.new-toast.error {
  background-color: #dc3545;
}

.new-toast.info {
  background-color: #17a2b8;
}
JS 
<script>
document.addEventListener("DOMContentLoaded", function () {
  const copyButtons = document.querySelectorAll('.copy-button');
  
  copyButtons.forEach(button => {
    button.addEventListener('click', function () {
      const targetId = button.getAttribute('data-target');
      copyCode(targetId, button);
    });
  });
});

function copyCode(contentId, button) {
  const content = document.getElementById(contentId);
  const range = document.createRange();
  const selection = window.getSelection();

  selection.removeAllRanges();
  range.selectNodeContents(content);
  selection.addRange(range);

  try {
    document.execCommand("copy");
    showToast("Code copied to clipboard!", "success");
    button.classList.add("copied");
  } catch (err) {
    console.error("Failed to copy", err);
    showToast("Failed to copy the code!", "error");
  }

  selection.removeAllRanges();
  setTimeout(() => button.classList.remove("copied"), 2000);
}

function showToast(message, type = "info") {
  const toast = document.getElementById("new-toast");
  toast.textContent = message;
  toast.classList.add("show", type);

  setTimeout(() => toast.classList.remove("show", type), 3000);
}
</script>

Primary Button

A rounded action button with hover effect.

Preview Button
HTML 
Past
CSS 
Past
JS 
Past
No component found.