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éctrica</h1>
</span>
<span>
<h5 class="banner-desc">Expertos en obra fotovoltaica y obra elé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ís y revisió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.