/* * {
    margin: 0;
    padding: 0;
    font-family: consulas;
    box-sizing: border-box;
}

body{
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background-color: #000;
} */

.neon-container {
     width: 279px !important;
     margin: 0 auto;
}

.neon_button {
     position: relative;
     padding: 10px 20px !important;
     color: #ffffff;
     text-decoration: none;
     font-size: 20px;
     /* text-transform: uppercase; */
     transition: 0.5s;
     background-color: #21252983;
     /* font-size: 12px; */
     border: none;
}
/* 
@media (max-width: 576px) {
     .neon_button {
          
          padding: 5px 10px !important;
          color: #ffffff;
          font-size: 14px !important;
     }
} */
          

.neon_button_text {
     margin-top: 6px;
}

.neon_button::before {
     content: " ";
     position: absolute;
     top: -1px;
     left: -1px;
     width: 10px;
     height: 10px;
     border-top: 2px solid #ffc800;
     border-left: 2px solid #ffc800;
     transition: 0.5s;
     transition-delay: 0.5s;
}

.neon_button::after {
     content: " ";
     position: absolute;
     bottom: -1px;
     right: -1px;
     width: 10px;
     height: 10px;
     border-bottom: 2px solid #ffc800;
     border-right: 2px solid #ffc800;
     transition: 0.5s;
     transition-delay: 0.5s;
}

.neon_button:hover::before,
.neon_button:hover::after {
     width: 100%;
     height: 100%;
     transition-delay: 0s;
}

.neon_button:hover {
     background: #ffc800;
     color: white;
     box-shadow: 0 0 30px #ffc800;
     transition-delay: 0.5s;
}

/* Efek button lain ========================================================= */
.btn2 {
     width: 170px;
     height: 45px;
     border-radius: 5px;
     border: none;
     transition: all 0.5s ease-in-out;
     font-size: 17px;
     font-weight: 600;
     display: flex;
     align-items: center;
     background: #040f16;
     color: #f5f5f5;
     box-shadow: -3px 5px 15px rgba(0, 0, 0, .4);
}


.btn2:hover {
     box-shadow: 0 0 20px 0px #2e2e2e3a;
}

.btn2 .icon {
     position: absolute;
     height: 40px;
     width: 70px;
     display: flex;
     justify-content: center;
     align-items: center;
     transition: all 0.5s;
}

.btn2 .text {
     transform: translateX(55px);
}

.btn2:hover .icon {
     width: 175px;
}

@media (max-width: 576px) {
     .btn2{
          width: 150px !important;
          height: 35px;
          font-size: 12px;
     }
     .btn2:hover .icon {
          width: 150px !important;
     }
}

.btn2:hover .text {
     transition: all 0.5s;
     opacity: 0;
}

.btn2:focus {
     outline: none;
}

.btn2:active .icon {
     transform: scale(0.85);
}


.btn3 {
     width: 220px;
     height: 45px;
     border-radius: 5px;
     border: none;
     transition: all 0.5s ease-in-out;
     font-size: 17px;
     font-weight: 600;
     display: flex;
     align-items: center;
     background: #040f16;
     color: #f5f5f5;
     box-shadow: -3px 5px 15px rgba(0, 0, 0, .4);
}

.btn3:hover {
     box-shadow: 0 0 20px 0px #2e2e2e3a;
}

.btn3 .icon {
     position: absolute;
     height: 40px;
     width: 70px;
     display: flex;
     justify-content: center;
     align-items: center;
     transition: all 0.5s;
}

.btn3 .text {
     transform: translateX(55px);
}

.btn3:hover .icon {
     width: 220px;
}

@media (max-width: 576px) {
     .btn3{
          width: 180px;
          height: 35px;
          font-size: 12px;
     }
     .btn3:hover .icon {
          width: 180px;
     }
}

.btn3:hover .text {
     transition: all 0.5s;
     opacity: 0;
}

.btn3:focus {
     outline: none;
}

.btn3:active .icon {
     transform: scale(0.85);
}


.btn-navbar {
     width: 120px;
     height: 40px;
     border-radius: 5px;
     border: none;
     transition: all 0.5s ease-in-out;
     font-size: 1rem;
     font-weight: 600;
     display: flex;
     align-items: center;
     background: #040f1600;
     color: #f5f5f5;
     box-shadow: -3px 5px 15px rgba(0, 0, 0, .4);
     border: 1px solid #ffc800;
     margin-top: 5px;
}

.btn-navbar:hover {
     box-shadow: 0 0 20px 0px #2e2e2e3a;
}

.btn-navbar .icon {
     position: absolute;
     height: 40px;
     width: 70px;
     display: flex;
     justify-content: center;
     align-items: center;
     transition: all 0.5s;
}

.btn-navbar .text {
     transform: translateX(55px);
}

.btn-navbar:hover .icon {
     width: 120px;
}

.btn-navbar:hover .text {
     transition: all 0.5s;
     opacity: 0;
}

.btn-navbar:focus {
     outline: none;
}

.btn-navbar:active .icon {
     transform: scale(0.85);
}