0

¿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;
}

2
  • intenta ponerlo en position:fixed o ponle al padre del boton position:realtive el 28 feb. 2021 a las 16:20
  • @RobertPérez pon eso como respueta para que el usuario pueda aceptarla :)
    – Alvaro Montoro
    el 28 feb. 2021 a las 17:01

1 respuesta 1

1

intenta ponerlo en position:fixed o ponle al padre del boton position:realtive

3
  • Pon el padre del botón position: relative; el boton position absolute y cambia ese 7% por 7vw a ver el 28 feb. 2021 a las 17:56
  • Gracias ya pude arreglarlo gracias a ti :), costo un poco pero lo arregle y quedo bien el 28 feb. 2021 a las 18:13
  • pude arreglar varios errores de mi pagina me sirvio mucho lo que me dijiste. Pero lo que necesito es un Media Query el 28 feb. 2021 a las 20:16

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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