Los mejores Botones Html Y Css tu sitio web - Blogger Wordpress

PorAquí esta el código -julio 08, 2022

0

Hola amigos hoy les comparto un Diseño de botones en css y html adaptables con iconos y colores degradados que pueden utilizar gratuitamente para sus proyectos web, adelante la demostracion y la instalacion de los mismos.

Instalacion De estilos

Paso 1: Primero instalaremos los estilos para que se vean los botones en nuestra plantilla Blogger. Y para eso debes dirigirte a Tema > Editar Html > Luego CTRL + F y busca: ]]></b:skin> y arriba de esa línea pegas lo siguiente:

.botones-descarga{ display: flex; justify-content: center; font-family: arial; font-size: ; } @media (max-width:800px){ .botones-descarga{ flex-direction: column; justify-content: center; text-align: center; } } .bton-azul{ background: linear-gradient(to right, #0084ff, #0051ff); padding: 10px; color: white; text-decoration: none; margin: 5px; border-radius: 5px; border-bottom: solid 1px black; } .bton-azul i { background-color: #09005c; padding: 5px; margin-left: 10px; } .bton-azul:hover{ background: linear-gradient(to right, #0051ff, #0084ff); filter: drop-shadow(0 0 5px black); border-bottom: solid 1px rgb(0, 255, 55); } .bton-rojo{ background: linear-gradient(to right, #c51717, #ff0062); padding: 10px; color: white; text-decoration: none; margin: 5px; border-radius: 5px; border-bottom: solid 1px black; } .bton-rojo i { background-color: #5c0000; padding: 5px; margin-left: 10px; } .bton-rojo:hover{ background: linear-gradient(to right, #ff0062, #c51717); filter: drop-shadow(0 0 5px black); border-bottom: solid 1px rgb(0, 255, 55); } .bton-verde{ background: linear-gradient(to right, #17c52e, #008316); padding: 10px; color: white; text-decoration: none; margin: 5px; border-radius: 5px; border-bottom: solid 1px black; } .bton-verde i { background-color: #155c00; padding: 5px; margin-left: 10px; } .bton-verde:hover{ background: linear-gradient(to right, #008316, #17c52e); filter: drop-shadow(0 0 5px black); border-bottom: solid 1px rgb(0, 255, 55); } .bton-oscuro{ background: linear-gradient(to right, #353535, #1e221f); padding: 10px; color: white; text-decoration: none; margin: 5px; border-radius: 5px; border-bottom: solid 1px black; } .bton-oscuro i { background-color: #000000; padding: 5px; margin-left: 10px; } .bton-oscuro:hover{ background: linear-gradient(to right, #1e221f, #353535); filter: drop-shadow(0 0 5px black); border-bottom: solid 1px rgb(0, 255, 55); } .bton-naraja{ background: linear-gradient(to right, #ff9100, #f1cd00); padding: 10px; color: white; text-decoration: none; margin: 5px; border-radius: 5px; border-bottom: solid 1px black; } .bton-naraja i { background-color: #ff7b00; padding: 5px; margin-left: 10px; } .bton-naraja:hover{ background: linear-gradient(to right, #f1cd00, #ff9100); filter: drop-shadow(0 0 5px black); border-bottom: solid 1px rgb(0, 255, 55); } .bton-morado{ background: linear-gradient(to right, #9c00a1, #e900f1); padding: 10px; color: white; text-decoration: none; margin: 5px; border-radius: 5px; border-bottom: solid 1px black; } .bton-morado i { background-color: #430046; padding: 5px; margin-left: 10px; } .bton-morado:hover{ background: linear-gradient(to right, #e900f1, #9c00a1); filter: drop-shadow(0 0 5px black); border-bottom: solid 1px rgb(0, 255, 55); } .bton-rosado{ background: linear-gradient(to right, #ff0080, #bd005e); padding: 10px; color: white; text-decoration: none; margin: 5px; border-radius: 5px; border-bottom: solid 1px black; } .bton-rosado i { background-color: #8a0346; padding: 5px; margin-left: 10px; } .bton-rosado:hover{ background: linear-gradient(to right, #bd005e, #ff0080); filter: drop-shadow(0 0 5px black); border-bottom: solid 1px rgb(0, 255, 55); } .post-body a{ color: white; }

Paso 2:Para que puedas añadir iconos a tus botones, instalaremos Font Awesome la versión 5 agregando la siguiente línea debajo de <head> normalmente se ubica en las primeras lineas de la plantilla.

Colocar Html e iconos

Font Awesome Boxicons

Paso 3:Ahora debemos copiar de Div a Div el siguiente codigo en nuestras entradas, para que funcionen nuestros botones

<a href="Tu-link" target="_blank" class="bton-azul">
            Descargar <i class="fa fa-download" aria-hidden="true"></i>
        </a>
        <a href="Tu-link" target="_blank" class="bton-rojo">
            Descargar <i class="fa fa-eye" aria-hidden="true"></i>
        </a>
        <a href="Tu-link" target="_blank" class="bton-verde">
            Descargar <i class="fa fa-download" aria-hidden="true"></i>
        </a>
        <a href="Tu-link" target="_blank" class="bton-oscuro">
            Descargar <i class="fa fa-download" aria-hidden="true"></i>
        </a>    
    </div>
 <div class="botones-descarga">

<a href="Tu-link" target="_blank" class="bton-naraja">
            Descargar <i class="fa fa-download" aria-hidden="true"></i>
        </a>
        <a href="Tu-link" target="_blank" class="bton-morado">
            Descargar <i class="fa fa-download" aria-hidden="true"></i>
        </a>
        <a href="Tu-link" target="_blank" class="bton-rosado">
            Descargar <i class="fa fa-download" aria-hidden="true"></i>
        </a>
    </div>

Resultado

Descargar Descargar Descargar Descargar

Descargar Descargar Descargar

Video Explicativo

Los mejores Botones Html Y Css tu sitio web - Blogger Wordpress

Instalacion De estilos

Colocar Html e iconos

Resultado

Video Explicativo

Publicar un comentario

Formulario de contacto