Halo temen-temen, kembali lagi dengan saya. Konten kali ini merupakan animasi button menggunakan HTML dan CSS saja. Format penamaan class dalam script ini juga sudah mengacu sama dengan penamaan Bootstrap, sehingga kami harapkan dari temen-temen sudah familiar sama class-class CSS-nya serta mudah untuk digabungkan di script temen-temen yang sudah mengimplementasikan Bootstrap sebelumnya.

Di sini untuk text editornya saya menggunakan Visual Studio Code serta Firefox sebagai browsernya.

Untuk temen-temen yang kepo tentang konfigurasi dan extensi VS Code yang saya pakai silakan klik sitasi di bawah ini.

Full Konfigurasi & Ekstensi VS Code Saya
Tampilan Btn Neon

DEMO

https://www.diefind.com/demo/btn-neon-1

Berikut untuk script lengkapnya dan jika ada yang belum jelas bisa menonton videonya di atas.

index.html

/index.html
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>
      Button Neon Dengan Animasi Yang Super Keren Elegan Responsive #btn #1
    </title>

    <style>
      :root {
        --dark: #030c26;
        --success: #00c853;
        --warning: #ffab00;
        --danger: #d50000;
      }
      body {
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        background: var(--dark);
      }

      /* .btn */
      .btn {
        cursor: pointer;
        vertical-align: middle;
        text-align: center;
        text-decoration: none;
        font-size: 24px;
        letter-spacing: 4px;
        line-height: 20px;
        padding: 16px 36px;
        overflow: hidden;
      }

      /* .btn.btn-neon */
      .btn.btn-neon {
        position: relative;
        display: inline-block;
        border: none;
        background: transparent;
        text-transform: uppercase;
        font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
          "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
      }
      .btn.btn-neon > span {
        position: absolute;
        display: block;
      }
      .btn.btn-neon > span:nth-child(1) {
        top: 0;
        left: -100%;
        width: 100%;
        height: 2px;
      }
      .btn.btn-neon > span:nth-child(2) {
        right: 0;
        top: -100%;
        height: 100%;
        width: 2px;
      }
      .btn.btn-neon > span:nth-child(3) {
        bottom: 0;
        right: -100%;
        width: 100%;
        height: 2px;
      }
      .btn.btn-neon > span:nth-child(4) {
        left: 0;
        bottom: -100%;
        height: 100%;
        width: 2px;
      }
      .btn.btn-neon:hover > span:nth-child(1) {
        left: 100%;
        transition: 1s;
      }
      .btn.btn-neon:hover > span:nth-child(2) {
        top: 100%;
        transition: 1s;
        transition-delay: 0.25s;
      }
      .btn.btn-neon:hover > span:nth-child(3) {
        right: 100%;
        transition: 1s;
        transition-delay: 0.5s;
      }
      .btn.btn-neon:hover > span:nth-child(4) {
        bottom: 100%;
        transition: 1s;
        transition-delay: 0.75s;
      }
      .btn.btn-neon:hover {
        color: #fff !important;
        border-radius: 2px;
        transition: 0.4s;
        transition-delay: 1s;
      }

      /* .btn.btn-neon.btn-success */
      .btn.btn-neon.btn-success {
        color: var(--success);
      }
      .btn.btn-neon.btn-success > span:nth-child(1) {
        background: linear-gradient(90deg, transparent, var(--success));
      }
      .btn.btn-neon.btn-success > span:nth-child(2) {
        background: linear-gradient(180deg, transparent, var(--success));
      }
      .btn.btn-neon.btn-success > span:nth-child(3) {
        background: linear-gradient(270deg, transparent, var(--success));
      }
      .btn.btn-neon.btn-success > span:nth-child(4) {
        background: linear-gradient(0deg, transparent, var(--success));
      }
      .btn.btn-neon.btn-success:hover {
        background: var(--success);
        box-shadow: 0 0 20px var(--success), 0 0 40px var(--success),
          0 0 80px var(--success);
      }

      /* .btn.btn-neon.btn-warning */
      .btn.btn-neon.btn-warning {
        color: var(--warning);
      }
      .btn.btn-neon.btn-warning > span:nth-child(1) {
        background: linear-gradient(90deg, transparent, var(--warning));
      }
      .btn.btn-neon.btn-warning > span:nth-child(2) {
        background: linear-gradient(180deg, transparent, var(--warning));
      }
      .btn.btn-neon.btn-warning > span:nth-child(3) {
        background: linear-gradient(270deg, transparent, var(--warning));
      }
      .btn.btn-neon.btn-warning > span:nth-child(4) {
        background: linear-gradient(0deg, transparent, var(--warning));
      }
      .btn.btn-neon.btn-warning:hover {
        background: var(--warning);
        box-shadow: 0 0 20px var(--warning), 0 0 40px var(--warning),
          0 0 80px var(--warning);
      }

      /* .btn.btn-neon.btn-danger */
      .btn.btn-neon.btn-danger {
        color: var(--danger);
      }
      .btn.btn-neon.btn-danger > span:nth-child(1) {
        background: linear-gradient(90deg, transparent, var(--danger));
      }
      .btn.btn-neon.btn-danger > span:nth-child(2) {
        background: linear-gradient(180deg, transparent, var(--danger));
      }
      .btn.btn-neon.btn-danger > span:nth-child(3) {
        background: linear-gradient(270deg, transparent, var(--danger));
      }
      .btn.btn-neon.btn-danger > span:nth-child(4) {
        background: linear-gradient(0deg, transparent, var(--danger));
      }
      .btn.btn-neon.btn-danger:hover {
        background: var(--danger);
        box-shadow: 0 0 20px var(--danger), 0 0 40px var(--danger),
          0 0 80px var(--danger);
      }
    </style>
  </head>
  <body>
    <a href="#" class="btn btn-neon btn-success">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      Neon Success
    </a>
    <a href="#" class="btn btn-neon btn-warning">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      Neon Warning
    </a>
    <a href="#" class="btn btn-neon btn-danger">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      Neon Danger
    </a>
  </body>
</html>

Semoga Bermanfaat …