0

Estoy utilizando un slider de Slick con 3 slides, en el slider número 1 tengo un botón y en el tercer slide tengo el mismo botón pero con diferente destino al hacer click, el problema es que al trata de alinearlo en el slide 1 se pone en una posición y en el slide 3 se pone en otra, no logro hacer que se pongan en donde mismo a pesar de que son el mismo botón, ¿Qué estoy haciendo mal? El css de mi div:

.banner-main {
    top: 30%;
    width: 100%;
    position: absolute;
    color: #FAFAFA;
    background-color: rgba(34, 34, 34, 0.6);
    padding-bottom: 10px;
    display: block;
    line-height: .3em;
    text-align: left;
}

El botón lo saque de aquí. Es el cuarto botón de la sección "Victoria"

<div id="slide1">
        <div class="video-inline">
           <video  id="vid" class="video " loop="loop"  muted="muted" autoplay="autoplay">
              <source src="Videos/bannervideo.mp4" type="video/mp4" />
              <source src="Videos/bannervideo.webmhd.webm" type="video/webm" />
              <source src="Videos/bannervideo.oggtheora.ogv" type="video/ogg" />
              Tu navegador no soporta video HTML5.
           </video>
           <canvas class="canvas"></canvas>
           <div class="video-timeline js-timeline">
              <div class="video-timeline-passed js-timeline-passed"></div>
           </div>
        </div>
        <div class="banner-main">
           <h1 class="banner-header">PV MAN POWER</h1>
           <span>
              <h1 class="banner-sub-header">Mano de obra el&eacute;ctrica</h1>
           </span>
           <span>
              <h5 class="banner-desc">Expertos en obra fotovoltaica y obra el&eacute;ctrica con una gran trayectoria</h5>
           </span>
           <span>
             <div class="col-md-3 col-sm-3 col-xs-6" style="margin-left: -6.4vW;"> <a href="#sectores-size" class="btn btn-sm animated-button victoria-four">Ver proyectos</a> </div>
           </span>
        </div>
     </div>
    <div id="slide3">
                <div class="banner-main">
                   <h1 class="banner-header">MARCA</h1>
                   <span>
                      <h1 class="banner-sub-header">Peritaje</h1>
                   </span>
                   <span>
                      <h5 class="banner-desc">Analis&iacute;s y revisi&oacute;n de sistemas fotovoltaicos</h5>
                   </span>
                   <div class="col-md-3 col-sm-3 col-xs-6"> <a href="#servicios-size" class="btn btn-sm animated-button victoria-four">Servicios</a></div>
                </div>
             </div>

Y este es el CSS de el botón que no consigo alinear.

@import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css);
@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700);

a.animated-button:link,
a.animated-button:visited {
    position: relative;
    display: block;
    margin: 30px auto 0;
    padding: 14px 15px;
    color: #fafafa;
    font-size: 55x;
    font-weight: bold;
    text-decoration: none;
    overflow: hidden;
    letter-spacing: .08em;
    border-radius: 0;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2);
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}
a.animated-button:link:after,
a.animated-button:visited:after {
    content: "";
    position: absolute;
    height: 0%; /*Fonfo animado*/
    left: 50%; /*Fonfo animado*/
    top: 50%; /*Fonfo animado*/
    width: 150%;/*Fonfo animado*/
    z-index: -1;
    -webkit-transition: all 0.75s ease 0s;
    -moz-transition: all 0.75s ease 0s;
    -o-transition: all 0.75s ease 0s;
    transition: all 0.75s ease 0s;
}
a.animated-button:link:hover,
a.animated-button:visited:hover {
    color: #333333;
    text-shadow: none;
}
a.animated-button:link:hover:after,
a.animated-button:visited:hover:after {

}
a.animated-button:link,
a.animated-button:visited {
    display: block;
    padding: 6px 6px;
    color: #FAFAFA;
    font-size: 15px;
    text-align: center;
    text-decoration: underline;
    overflow: hidden;
    letter-spacing: .08em;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2);
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
    width: 180px;
}
a.animated-button.victoria-four {
    border: 1px solid #FAFAFA;
    left: 100px;
    margin: 0;
}
a.animated-button.victoria-four:after {
    background: #FAFAFA;
    opacity: .5;
    -moz-transform: translateY(-50%) translateX(-50%) rotate(90deg);
    -ms-transform: translateY(-50%) translateX(-50%) rotate(90deg);
    -webkit-transform: translateY(-50%) translateX(-50%) rotate(90deg);
    transform: translateY(-50%) translateX(-50%) rotate(90deg);
}
a.animated-button.victoria-four:hover:after {
    opacity: 1;
    height: 600% !important;
}

Cualquier observación a parte de mi problema es aceptada, tengo poco en esto, gracias.

1
  • Buen día, Angel. ¿Podrías poner un ejemplo funcional que podamos reproducir para ver el problema con facilidad?
    – gugadev
    el 8 sep. 2017 a las 19:52

1 respuesta 1

0

Trate de simular tu codigo, y creo que encontre la solucion, El problema esta aqui, le estas asignando un left:100px;

Esto hace que tu boton salga 100px desplazado de la izquierda, alli el primer detalle.

 //Quitale ese left:100px;

a.animated-button.victoria-four {
    border: 1px solid #FAFAFA;
    left: 100px;
    margin: 0;
}

El siguiente boton tiene un style

     <div class="col-md-3 col-sm-3 col-xs-6" style="margin-left: -6.4vW;"> <a href="#sectores-size" class="btn btn-sm animated-button victoria-four">Ver proyectos</a> </div>

Quitale ese estilo y con eso deberia de funcionar.

PD: No subo el ejemplo funcional porque no pude hacer que funcionara en el snipet

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.