Botón Doble Borde

Añadir elemento
Se debe crear un componente de tipo botón de elementor

Añadir clase
Se debe poner la siguiente clase en la caja de clase de elementor del componente

				
					/* Clase cambiada a .du_btn_2border */
.du_btn_2border {
  position: relative;
  width: 130px;
  height: 40px;
  line-height: 40px;
  padding: 0;
  border: none;
  /* Gradiente inicial */
  background: linear-gradient(0deg, rgba(255, 27, 0, 1) 0%, rgba(251, 75, 2, 1) 100%);
  /* Agregamos una transición para el fondo */
  transition: all 0.4s ease;
}

.du_btn_2border:hover {
  color: #f0094a;
  background: transparent;
  box-shadow: none; /* Quitamos la sombra de caja en hover */
}

/* Pseudoelementos (bordes) */
.du_btn_2border:before,
.du_btn_2border:after {
  content: '';
  position: absolute;
  height: 2px;
  width: 0; /* Ancho inicial a cero */
  background: #f0094a;

  box-shadow:
    -1px -1px 5px 0px #fff,
    7px 7px 20px 0px #0003,
    4px 4px 5px 0px #0002;

  transition: 400ms ease all;
}

/* Posición del borde superior */
.du_btn_2border:before {
  top: 0;
  right: 0;
}

/* Posición del borde inferior */
.du_btn_2border:after {
  right: initial;
  top: initial;
  left: 0;
  bottom: 0;
}

/* Efecto Hover: Los bordes se extienden */
.du_btn_2border:hover:before,
.du_btn_2border:hover:after {
  width: 100%; /* El ancho debe ser 100% en hover */
  /* Transición más lenta al salir del hover */
  transition: 800ms ease all;
}