Botón de Descargar con Efecto al Pasar el Cursor para el Blog

Usa este botón de descargar con efecto al pasar el cursor para tu blog de Blogger o WordPress, usando solamente CSS/Estilos y Font Awesome.

¡Hola! soy Gabriela de peengler.com. Esta vez quiero mostrarte 2 estilos de botones con muy buenos efectos. Sirven para lo que quieras porque lo puedes adaptar ya sea para descargar, demo, comprar, etc.

Sin más que decir, ¡Empecemos!

Clic en la imagen para ver el vídeo ↑ en YouTube

Botón de descargar con efecto deslizante

Para añadir el botón versión 1, necesitaras incluir en tu plantilla Font Awesome, para que los iconos se puedan mostrar, pega la siguiente línea después del <head>


<link href='https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>

Luego, te ubicas en los estilos/CSS, en Blogger lo pegas arriba de esta línea ]]></b:skin>


#wrap {
    margin: 20px auto;
    text-align: center;
}

#wrap br {
    display: none;
}

.btn-slide, .btn-slide2 {
    position: relative;
    display: inline-block;
    height: 50px;
    width: 200px;
    line-height: 50px;
    padding: 0;
    border-radius: 50px;
    background: #fdfdfd;
    border: 2px solid #0099cc;
    margin: 10px;
    transition: .5s;
}

.btn-slide2 {
    border: 2px solid #f39c12;
}

.btn-slide:hover {
    background-color: #0099cc;
}

.btn-slide2:hover {
    background-color: #f39c12;
}

.btn-slide:hover span.circle, .btn-slide2:hover span.circle2 {
    left: 100%;
    margin-left: -45px;
    background-color: #fdfdfd;
    color: #0099cc;
}

.btn-slide2:hover span.circle2 {
    color: #f39c12;
}

.btn-slide:hover span.title, .btn-slide2:hover span.title2 {
    left: 40px;
    opacity: 0;
}

.btn-slide:hover span.title-hover, .btn-slide2:hover span.title-hover2 {
    opacity: 1;
    left: 40px;
}

.btn-slide span.circle, .btn-slide2 span.circle2 {
    display: block;
    background-color: #0099cc;
    color: #fff;
    position: absolute;
    float: left;
    margin: 5px;
    line-height: 42px;
    height: 40px;
    width: 40px;
    top: 0;
    left: 0;
    transition: .5s;
    border-radius: 50%;
}

.btn-slide2 span.circle2 {
    background-color: #f39c12;
}

.btn-slide span.title,
  .btn-slide span.title-hover, .btn-slide2 span.title2,
  .btn-slide2 span.title-hover2 {
    position: absolute;
    left: 90px;
    text-align: center;
    margin: 0 auto;
    font-size: 16px;
    font-weight: bold;
    color: #30abd5;
    transition: .5s;
}

.btn-slide2 span.title2,
  .btn-slide2 span.title-hover2 {
    color: #f39c12;
    left: 80px;
}

.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
    left: 80px;
    opacity: 0;
}

.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
    color: #fff;
}

Ya con esto guardas.

Ahora te ubicas en una entrada con vista HTML y pega lo siguiente, con esto tus botones se visualizarán:


  <div id="wrap">
<a href="#" class="btn-slide" target="_blank">
<span class="circle"><i class="fa fa-rocket"></i></span>
<span class="title">Demo</span>
<span class="title-hover">Click Aquí</span>
</a>
<a href="#" class="btn-slide2" target="_blank">
<span class="circle2"><i class="fa fa-download"></i></span>
<span class="title2">Descargar</span>
<span class="title-hover2">Click Aquí</span>
</a>
</div>

Cualquier cosa mira el vídeo tutorial → clic aquí

Botón de descargar con sencillo efecto hover

Para este botón le llamare versión 2, también necesitaras del Font Awesome, si ya lo tienes no lo apliques de nuevo. De lo contrario pega la siguiente línea después del <head>


<link href='https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>

Luego, te ubicas en los estilos/CSS, en Blogger lo pegas arriba de esta línea ]]></b:skin>


.button ul{margin:0;padding:0}
.button li{display:inline;margin:5px;padding:0;list-style:none}
.button li a.demo,.button li a.download{text-decoration:none;position:relative;padding:15px 65px 17px 25px;color:#fff!important;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:0.5px;border-radius:3px;box-shadow:0 1px rgba(0,0,0,0.1);line-height:normal;transition:all .3s}
.button li a.demo:active,.button li a.download:active{cursor:pointer}
.button li a.demo:after,.button li a.download:after{background:rgba(0,0,0,0.1);position:absolute;right:0;top:0;font-weight:normal;display:inline-block;margin:0 0 0 10px;color:#fff;padding:17px;font-family:fontawesome}

.button li a.demo:after{content:'\f135'}
.button li a.demo{background:#f39c12;}

.button li a.download:after{content:'\f019'}
.button li a.download{background:#3498db}

.button li a.demo:hover,.button li a.download:hover{background:#666}

Guardas los cambios.

Ahora te diriges a una entrada con vista HTML y pega lo siguiente:


<div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="#" target="_blank">Demo</a></li>
<li><a class="download" href="#" target="_blank">Download</a></li>
</ul>
</div>

Cualquier cosa mira el vídeo tutorial → clic aquí

Personalizar los botones de descargas

De seguro quieres modificar el icono de los botones, cambiar su color y entre otras cosas, es por eso que quiero explicarte un poco en donde debes ubicarte.

Cambiar el icono del botón

Como estas usando Font Awesome debes irte a su página → clic aquí. Luego eliges el icono que se adapte a tu gusto.

Botón de descargar versión 1: Debes copiar el código que muestra entre <i>….</i> y eliminas el del botón que se encuentra en el código que pegaste en tu entrada.

Botón versión 2: Debes irte al código de tu plantilla, específicamente en el CSS del botón y cambias los números que representan al icono sin quitar la barra \.

Como ves tienes botón de descarga(download) y el demo:

.button li a.download:after{content:’\f019‘}

.button li a.demo:after{content:’\f135‘}

Cambiar el color del botón de descargar

Para el botón de la versión 1, sus botones en el CSS se dividen entre .btn-slide2 que es el demo y el .btn-slide que es el botón de descarga, con que sepas esto puedes modificar lo que quieras. En este caso el color de fondo, Ejemplo:

Modificar el color del botón descargar versión 1: Ya sabes que en el CSS este botón es .btn-slide Ahora, en donde veas esta línea y tenga background modificas el código por el que tú quieras y listo. Para cambiar el color del texto es con color en el ejemplo es blanco que sería: color:#fff;

Color del botón versión 2: Simplemente cambias el código del color del background:

.button li a.demo{background:#f39c12}

.button li a.download{background:#3498db}

También puedes modificar el hover, es decir cuando se pasa el cursor cambia aun tono oscuro:

.button li a.demo:hover,.button li a.download:hover{background:#666}

En conclusión

Espero que te guste el botón de descargar y demo que muestro en este artículo, como dije no es necesario que sea para descargar también lo puedes ajustar a tu proyecto.

Si tienes alguna duda o pregunta, déjamelo en los comentarios.

Sígueme en Youtube🔥

Aprende a crear páginas web con HTML, CSS y Javascript.

Me interesa

¿Te gusto el post?

¡Compártelo!