¿como fijar boton para que no se mueva en css y html?
cuando minimizo la pagina el boton "Play" class="h-button centered" se corre a la izquierda, que tendria que hacer para fijar en un lugar y que no se mueva? quiero que quede fijo justo arriba del titulo "Dome of the German Bundestag"
¿como fijar boton para que no se mueva en css y html?
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Movies</title>
<link href="https://fonts.googleapis.com/css2?family=Montserrat&family=Open+Sans&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/normalize.css@8.0.1/normalize.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/glider-js@1.7.3/glider.min.css">
<link rel="stylesheet" href="css/estilos.css">
<link rel="stylesheet" href="css/boton.css">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/screen.css" media="screen">
</head>
<body>
<nav class="troya">
<a class="troya-logo">
<img src="logo/logo.jpg" width="100">
</a>
<ul class="nav sf-menu">
<!--otros li-->
</ul>
</nav>
<div class="contenedor">
<main class="contenido-principal">
<a aria-label='Thanks' class='h-button centered' data-text='Play' href='#'>
<span>G</span>
<span>o</span>
<span>!</span>
</a>
<img src="img/1.jpg" alt="Dome of the German Bundestag" class="contenido-principal__imagen">
<div class="contenido-principal__contenedor">
<h1 class="contenido-principal__titulo">Dome of the German Bundestag</h1>
<p class="contenido-principal__resumen">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a commodo orci. Nulla ipsum ante, auctor a odio id, bibendum accumsan mauris.
</p>
<p class="contenido-principal__resumen">
Fusce malesuada mollis ante, at elementum mi maximus nec. Praesent volutpat, tortor sed condimentum sagittis, mi diam fringilla nibh.
</p>
</div>
</main>
<div class="carousel">
<div class="carousel__contenedor">
<button aria-label="Anterior" class="carousel__anterior">
<i class="fas fa-chevron-left"></i>
</button>
<h3>Peliculas mas populares</h3>
<div class="carousel__lista">
<div class="carousel__elemento">
<img src="img/2.jpg" alt="Rock And Roll">
<p></p>
</div>
<div class="carousel__elemento">
<img src="img/3.jpg" alt="Rock And Roll">
<p></p>
</div>
<div class="carousel__elemento">
<img src="img/4.jpg" alt="Rock And Roll">
<p></p>
</div>
<div class="carousel__elemento">
<img src="img/5.jpg" alt="Rock And Roll">
<p></p>
</div>
<div class="carousel__elemento">
<img src="img/6.jpg" alt="Rock And Roll">
<p></p>
</div>
<div class="carousel__elemento">
<img src="img/7.jpg" alt="Rock And Roll">
<p></p>
</div>
<div class="carousel__elemento">
<img src="img/8.jpg" alt="Rock And Roll">
<p></p>
</div>
<div class="carousel__elemento">
<a href="#"><img src="img/9.jpg" alt="Rock And Roll"></a>
<p></p>
</div>
</div>
<button aria-label="Siguiente" class="carousel__siguiente">
<i class="fas fa-chevron-right"></i>
</button>
</div>
<div role="tablist" class="carousel__indicadores"></div>
</div>
</div>
</div>
<!--- CAROUSEL 1 NETFLIX ----->
<div class="peliculas-recomendadas contenedor">
<div class="contenedor-titulo-controles">
<h3>Peliculas Recomendadas</h3>
<div class="indicadores"></div>
</div>
<div class="contenedor-principal">
<button role="button" id="flecha-izquierda" class="flecha-izquierda">
<i class="fas fa-angle-left"></i>
</button>
<div class="contenedor-carousel">
<div class="carousel">
<div class="pelicula">
<a href="#"><img src="img2/1.jpg" alt="Recomendadas"></a>
</div>
<div class="pelicula">
<a href="#"><img src="img2/2.jpg" alt="Recomendadas"></a>
</div>
<div class="pelicula">
<a href="#"><img src="img2/3.jpg" alt="Recomendadas"></a>
</div>
<div class="pelicula">
<a href="#"><img src="img2/4.jpg" alt="Recomendadas"></a>
</div>
<div class="pelicula">
<a href="#"><img src="img2/5.jpg" alt="Recomendadas"></a>
</div>
<div class="pelicula">
<a href="#"><img src="img2/6.jpg" alt="Recomendadas"></a>
</div>
<div class="pelicula">
<a href="#"><img src="img2/7.jpg" alt="Recomendadas"></a>
</div>
<div class="pelicula">
<a href="#"><img src="img2/8.jpg" alt="Recomendadas"></a>
</div>
<div class="pelicula">
<a href="#"><img src="img2/9.jpg" alt="Recomendadas"></a>
</div>
<div class="pelicula">
<a href="#"><img src="img2/10.jpg" alt="Recomendadas"></a>
</div>
<div class="pelicula">
<a href="#"><img src="img2/11.jpg" alt="Recomendadas"></a>
</div>
<div class="pelicula">
<a href="#"><img src="img2/12.jpg" alt="Recomendadas"></a>
</div>
<div class="pelicula">
<a href="#"><img src="img2/13.jpg" alt="Recomendadas"></a>
</div>
<div class="pelicula">
<a href="#"><img src="img2/14.jpg" alt="Recomendadas"></a>
</div>
<div class="pelicula">
<a href="#"><img src="img2/15.jpg" alt="Recomendadas"></a>
</div>
<div class="pelicula">
<a href="#"><img src="img2/16.jpg" alt="Recomendadas"></a>
</div>
<div class="pelicula">
<a href="#"><img src="img2/17.jpg" alt="Recomendadas"></a>
</div>
<div class="pelicula">
<a href="#"><img src="img2/18.jpg" alt="Recomendadas"></a>
</div>
<div class="pelicula">
<a href="#"><img src="img2/19.jpg" alt="Recomendadas"></a>
</div>
<div class="pelicula">
<a href="#"><img src="img2/20.jpg" alt="Recomendadas"></a>
</div>
</div>
</div>
<button role="button" id="flecha-derecha" class="flecha-derecha">
<i class="fas fa-angle-right"></i>
</button>
</div>
</div>
</div>
<!--- CAROUSEL 222 NETFLIX ----->
<div class="peliculas-recomendadas2 contenedor">
<div class="contenedor-titulo-controles2">
<h3>Peliculas de Acción</h3>
<div class="indicadores2">
</div>
</div>
<div class="contenedor-principal2">
<button role="button" id="flecha-izquierda2" class="flecha-izquierda">
<i class="fas fa-angle-left"></i>
</button>
<div class="contenedor-carousel2">
<div class="carousel2">
<div class="pelicula2">
<a href="#"><img src="img2/1.jpg" alt="Recomendadas"></a>
</div>
<div class="pelicula2">
<a href="#"><img src="img2/2.jpg" alt="Recomendadas"></a>
</div>
<div class="pelicula2">
<a href="#"><img src="img2/3.jpg" alt="Recomendadas"></a>
</div>
<div class="pelicula2">
<a href="#"><img src="img2/4.jpg" alt="Recomendadas"></a>
</div>
<div class="pelicula2">
<a href="#"><img src="img2/5.jpg" alt="Recomendadas"></a>
</div>
<div class="pelicula2">
<a href="#"><img src="img2/6.jpg" alt="Recomendadas"></a>
</div>
<div class="pelicula2">
<a href="#"><img src="img2/7.jpg" alt="Recomendadas"></a>
</div>
<div class="pelicula2">
<a href="#"><img src="img2/8.jpg" alt="Recomendadas"></a>
</div>
<div class="pelicula2">
<a href="#"><img src="img2/9.jpg" alt="Recomendadas"></a>
</div>
<div class="pelicula2">
<a href="#"><img src="img2/10.jpg" alt="Recomendadas"></a>
</div>
<div class="pelicula2">
<a href="#"><img src="img2/11.jpg" alt="Recomendadas"></a>
</div>
<div class="pelicula2">
<a href="#"><img src="img2/12.jpg" alt="Recomendadas"></a>
</div>
<div class="pelicula2">
<a href="#"><img src="img2/13.jpg" alt="Recomendadas"></a>
</div>
<div class="pelicula2">
<a href="#"><img src="img2/14.jpg" alt="Recomendadas"></a>
</div>
<div class="pelicula2">
<a href="#"><img src="img2/15.jpg" alt="Recomendadas"></a>
</div>
<div class="pelicula2">
<a href="#"><img src="img2/16.jpg" alt="Recomendadas"></a>
</div>
<div class="pelicula2">
<a href="#"><img src="img2/17.jpg" alt="Recomendadas"></a>
</div>
<div class="pelicula2">
<a href="#"><img src="img2/18.jpg" alt="Recomendadas"></a>
</div>
<div class="pelicula2">
<a href="#"><img src="img2/19.jpg" alt="Recomendadas"></a>
</div>
<div class="pelicula2">
<a href="#"><img src="img2/20.jpg" alt="Recomendadas"></a>
</div>
</div>
</div>
<button role="button" id="flecha-derecha2" class="flecha-derecha">
<i class="fas fa-angle-right"></i>
</button>
</div>
</div>
</div>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#content').css({'left':($('#page').width()/2)-($('#content').width()/2),'top':($('#page').height()/2)-($('#content').height()/2)});
});
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/glider-js@1.7.3/glider.min.js"></script>
<script src="https://kit.fontawesome.com/2c36e9b7b1.js" crossorigin="anonymous"></script>
<script src="js/app.js"></script>
<script src="js/app2.js"></script>
<script src="js/app3.js"></script>
</body>
</html>
boton.css
@import url("https://fonts.googleapis.com/css?family=Roboto:900");
a {
font-family: "Roboto", sans-serif;
font-weight: 900;
color: black;
text-decoration: none;
width: 100%;
}
.centered {
position: absolute;
left: 63%;
top: 7%;
transform: translate(-50%, -50%);
width:100%;
}
.h-button {
background: white;
padding: 20px;
width: 250px;
text-align: center;
}
.h-button span {
display: inline-block;
min-width: 0.3em;
text-transform: uppercase;
transition: 0.25s cubic-bezier(0.5, -1, 0.5, 2);
opacity: 0;
transform: translate(0, -20px);
}
.h-button:before {
content: attr(data-text);
position: absolute;
width: 100%;
left: 0;
transition: 0.25s cubic-bezier(0.5, -1, 0.5, 2);
text-transform: uppercase;
letter-spacing: 3.5px;
opacity: 1;
transform: translate(0, 0px);
}
.h-button:hover:before, .h-button:focus:before {
opacity: 0;
transform: translate(0, 20px);
}
.h-button:hover span, .h-button:focus span {
opacity: 1;
transform: translate(0, 0);
}
.h-button:hover span:nth-child(1), .h-button:focus span:nth-child(1) {
transition-delay: 0.025s;
}
.h-button:hover span:nth-child(2), .h-button:focus span:nth-child(2) {
transition-delay: 0.05s;
}
.h-button:hover span:nth-child(3), .h-button:focus span:nth-child(3) {
transition-delay: 0.075s;
}
.h-button:hover span:nth-child(4), .h-button:focus span:nth-child(4) {
transition-delay: 0.1s;
}
.h-button:hover span:nth-child(5), .h-button:focus span:nth-child(5) {
transition-delay: 0.125s;
}
.h-button:hover span:nth-child(6), .h-button:focus span:nth-child(6) {
transition-delay: 0.15s;
}