0

Tengo un botón que es un <a> y dentro de este tag un <span>, en el que hago una especie de recuadro en el botón, levemente desplazado hacia la derecha y hacia abajo, para que al clickearlo, el botón simule hundirse en el recuadro, como funcionaría un botón en la realidad. Hasta ahí todo ok, el problema surge al querer agregarle una transición al botón para que se desplace gentilmente hacia abajo. Lo que me genera el CSS es que el borde externo se acerque hacia el botón, en vez del caso inverso.

HTML

 <a href="#" class="main-button bold schedule" role="button">Schedule a call now<span class="outer-border"></span></a>

SASS

.main-button {
   text-transform: uppercase;
   font-size: .8em;
   background-color: #5F5F5F;
   padding: .6vw 1vw;
   position: relative;
   transition: all .3s ease;

   .outer-border {
       position: absolute;
       width: 96%;
       height: 76%;
       box-sizing: content-box;
       z-index: -1;
       border: 4px solid $white;
       left: 8px;
       top: 9px;
    }

    &:hover {
        background-color: rgb(70, 70, 70);
    }

    &:active {
        top: 4px;
        left: 4px;

        .outer-border {
           top: 5px;
           left: 4px;
        }
     }
  }

1 respuesta 1

2

El error sucede porque hay un conflicto entre la posición absoluta del botón y el span interno, por lo que yo te recomiendo que no uses top o left para moverlo, prueba con transform: translateX() translateY() o transform: translate(X,Y); debes aplicarlo tanto al boton como al span.

Por cierto, lo puedes hacer también prescindiendo del span, usando pseudo-elementos, así:

.main-button{
  display: inline-block;
  text-transform: uppercase;
  font-size: .8em;
  padding: calc(.6vw + .5em) calc(1vw + .5em);
  position: relative; 
  z-index: 1;
  perspective: 10em;
  color: white;
}

.main-button, 
.main-button::before,
.main-button::after{ 
  transition: all .3s ease;
  box-sizing: border-box;
}
 
.main-button::before,
.main-button::after{
  content: '';
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.main-button:active{
  transform: translate(4px, 5px);
}

/*Este va actuar como fondo de boton*/
.main-button:before{  
  background-color: #5F5F5F;
}

.main-button:hover::before{
  background-color: rgb(70, 70, 70);
}

/*Este va actuar como sombra de boton*/
.main-button::after{
  z-index: -2;
  background-color: lightgray;
  border: 4px solid lightgray;  
  transform: translate(4px, 5px);
}

.main-button:active::after{ 
  transform: translate(0, 0);
}
<a href="#" class="main-button">Schedule a call now</a>

Ahora solo tienes que traducirlo a sass. Éxitos!

3
  • El ejemplo es excelente! Realmente te agradezco. El tema es que necesito que el recuadro del botón sea hueco, es decir, un rectángulo hueco con borde de 2px, corrido de tal manera hacia la derecha, que se note que es hueco. el 18 ene. 2018 a las 11:55
  • Finalmente lo solucioné quitándole el background color al recuadro. Muchísimas gracias!!!! el 18 ene. 2018 a las 11:59
  • Con gusto. Éxitos! el 19 ene. 2018 a las 0:36

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.