CSS - Botones web

Código de botones creados con CSS 

Los botones se crean con la etiqueta normal de <a>, solo que el CSS es el que vamos a modificar al gusto.

Acá el código CSS

.btn_rsoc a{

    text-shadow: 1px 1px 1px #000;

    border-radius: 10px;

box-shadow:

    inset 2px 2px 3px rgba(255, 255, 255, 0.6),

    inset -2px -2px 3px rgba(0, 0, 0, 0.6);

}

.btn_rsoc a:nth-child(1){

    background-color: blue;

}

.btn_rsoc a:nth-child(2){

    background-color: green;

}

Este código es adicional (:hover)

.btn_rsoc a:nth-child(2){

    background-color: green...;

}

CSS - ::before banner con background

Banner con background de color difuminado.

Acá el código que hay que agregar en CSS. Lo demás lo tienes que averiguar... Truco sencillo pero efectivo.

NOTA: Si lo haces bien, también puedes agregar un vídeo y encima un texto con background tenue...

CSS

header::before{

    width: 100%;

    height: 100%;

    content: "";

    background: rgba(0, 0, 0, 0.532);

    position: absolute;

    z-index: 1;

}

Acordeón de imagenes

Código de acordeón para tu sitio web

Solo agregalo en tu sitio web y listo...

Ha si, lo olvidaba, solo HTML y CSS

 

HTML

<!------------ ACORDEON ---------->

<div class="ctr-accordion">

  <div class="tab">

    <a href="p/programming.html"><img src="

https://images.unsplash.com/"></a>

  </div>

  <div class="tab">

    <a href="p/programming.html"><img src="

https://images.unsplash.com/"></a>

  </div>

  <div class="tab">

    <a href="p/programming.html"><img src="

https://images.unsplash.com/"></a>

  </div>

  <div class="tab">

    <a href="p/programming.html"><img src="

https://images.unsplash.com/"></a>

  </div>

 

</div>

CSS

/************* ACORDEON *************/

.ctr-accordion{

    max-width: 1200px;

    height: 350px;

    display: flex;

    flex-direction: row;

    align-items: center;

    align-content: space-around;

    gap: 2px;

    overflow: hidden;

    margin: 50px auto;

}

 

.tab{

    position: relative;

    width: 16.6%;

    height: inherit;

    padding: 20px;

    background: rgb(150,150,150);

    cursor: pointer;

    transition: width .5s ease;

    border-radius: 25px;

}

 

.tab img{

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: all 0.5s ease;

    border-radius: 25px;

}

 

.tab:hover img{

    opacity: 0.6;

}

 

.tab:hover{

    width: 500%;

}

HTML5 - Carrusel para tu sitio web

Código para agregar tu carrusel a tu sitio web

Código sencillo:

<!--------------- CARRUSEL MOVIES --------------->

  <div class="carrusel">

    <div class="elemento">

      <a href="https://xviewplus.com/" target="_blank">

      <img src="img/xview logo.jpg" /></a>

    </div>

   

      <div class="elemento">

        <a href="https://www.paramountplus.com/home/" target="_blank">

        <img src="img/paramountplus logo.jpg" /></a>

      </div>

     

      <div class="elemento">

        <a href="https://www.netflix.com/browse" target="_blank">

        <img src="img/netflix logo.jpg" /></a>

      </div>

     

      <div class="elemento">

        <a href="https://play.max.com/home" target="_blank">

        <img src="img/hbo max logo.jpg" /></a>

      </div>

     

      <div class="elemento">

        <a href="p/soccer.html"><img src="img/soccer logo.jpg" /></a>

      </div>

     

      <div class="elemento">

        <a href="p/dinosaurios.html">

        <img src="img/jurassic park logo.jpg" /></a>

      </div>

     

      <div class="elemento">

        <a href="p/zoo.html"><img src="img/zoo logo mk.jpg" /></a>

      </div>

     

      <div class="elemento">

        <a href="https://www.youtube.com/" target="_blank">

        <img src="img/btn_youtube.jpg" /></a>

      </div>

     

    </div>

/************ CARRUSEL MOVIES ************/

.carrusel{

    padding: 30px 0px;

    display: flex;

    flex-wrap: nowrap;

    overflow: scroll;

    background: transparent;

    white-space: nowrap;

}

.elemento{

    flex: 1 0 auto;

    margin: 0 30px;

    background: #15a9f3;

    width: 200px;

    height: 270px;

}

.elemento img{

    width: 100%;

    height: 100%;

}

HTML - Código para 9 recuadros con media query

 

CÓDIGO HTML5

<main>

<!-------------- 1ERA SECCION -------------->

  <div class="row">

    <div class="column">

      <a href="https://www.paramountplus.com/"><img src="../img/paramountplus.jpg" alt="Paramount +" style="width:100%"></a>

    </div>

    <div class="column">

      <a href="https://play.hbomax.com/page/urn:hbo:page:home"><img src="img/hbo.png" alt="HBO Max" style="width:100%"></a>

    </div>

    <div class="column">

      <a href="https://disneyplus.com/"><img src="img/disneyplus.jpg" alt="Disney +" style="width:100%"></a>

    </div>    

    <div class="column">

      <a href="https://www.netflix.com/browse"><img src="img/netflix.jpg" alt="Netflix" style="width:100%"></a>

    </div>

    <div class="column">

      <a href="https://www.starplus.com/"><img src="img/starplus.jpg" alt="Star +" style="width:100%"></a>

    </div>

    <div class="column">

      <a href="https://vix.com/es-es/ondemandplus"><img src="https://img-s-msn-com.akamaized.net/tenant/amp/entityid/AAZOpTJ.img?h=0&w=600&m=6&q=60&u=t&o=f&l=f" alt="Vix +" style="width:100%"></a>

    </div>

    <div class="column">

      <a href="https://serieslan.com/dragon-ball-gt"><img src="img/dragonballgt.jpg" alt="Dragon Ball GT" title="Dragon Ball GT" style="width:100%"></a>

    </div>

    <div class="column">

      <a href="https://serieslan.com/los-caballeros-del-zodiaco"><img src="https://i0.wp.com/lacomikeria.com/wp-content/uploads/2022/02/33D1123B-9E73-40F4-A189-B74FDE357C54.jpeg?resize=600%2C400&ssl=1" alt="Caballeros del Zodiaco" title="Caballeros del Zodiaco" style="width:100%"></a>

    </div>

    <div class="column">

      <a href="https://vix.com/es-es/ondemandplus"><img src="img/livetv.jpg" alt="Vix +" style="width:100%"></a>

    </div>

  </div>

<!-------------- 2DA SECCION -------------->

  <div class="row">

    <div class="column">

      <a href="https://www.paramountplus.com/"><img src="../img/paramountplus.jpg" alt="Paramount +" style="width:100%"></a>

    </div>

.

.

.

</main>

CÓDIGO CSS

/************* MAIN *************/

main{

    width: 100%;

    height: auto;

    display: flex;

    flex-flow: row wrap;

    align-items: center;

    justify-content: center;

}

.column {

    float: left;

    width: 11%;

    padding: 5px;

  }

 

  /* Clearfix (clear floats) */

  .row::after {

    content: "";

    clear: both;

    display: table;

  }

main img{

    border-radius: 6px;

    border: .5px solid rgba(128, 128, 128, 0.301);

}

main img:hover{

    transition: .5s ease all;

    transform: scale(1.1);

}

@media screen and (min-width: 200px) and (max-width: 750px){

    .column{

        float: left;

        width: 33%;

        padding: 5px;

    }

}

CSS - Ajuste de imagen en backgroun para enlace

Código para ajustar una imagen como icono con CSS

 .linkkers a:first-child{

display:flex;

background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilIdquQAUNA1u4vVqTNAXjurVGnRzKsyW83SMDNMOYAvhQWHgPKa2D5mw3e83HAy7Bm2dwOTAgG-YFIWA1BocyQStnBbkcAyK-c2OkRi0GxSwgZGPcy6hw2JNuDhW0K14cUeHvfn85Uj1qEeNFR94NVeZJtToEzuVCmMlv3VGRJ8V9C-s-JIiS7M9n1Q/s16000/colmena.png);

background-position: center center;

background-repeat: no-repeat;

background-size: 30px;

}

CSS