Uso de Programas diseño Adobe

Insertar botón svg subir arriba para plantilla Html5up

Insertar botón SVG subir arriba para plantilla HTML5

Insertar botón subir arriba en formato SVG, para plantilla HTML5up, explicaremos paso a paso como insertar imagenes en formato svg , botones para redes sociales.

Aquí les dejamos los códigos de línea para insertar los botones en formato svg.

<div class="btn-up"><a class="ir-arriba" javascript:void(0) title="Volver arriba"><img src="images/boton/boton-up.svg" alt="arriba" /></a></div>

<div class="btn-whatsapp"><a href="https://wa.me/519xxxxxxxx?text=pon%20lo%20que%20necesites" target="_blank"><img src="images/boton/boton-whatsapp.svg" alt="Chat WhatsApp Mi empresa" /></a></div>

Aquí les dejamos los códigos de línea para tu hoja de estilos CSS.

.btn-whatsapp {display:block; width:60px; height:80px; position: fixed; right:0px; bottom:60px; border-radius:50%; line-height:60px; text-align:center; z-index:9999;}
.btn-up {display:block; width:60px; height:140px; position: fixed; cursor:pointer; right:0px; bottom:60px; border-radius:50%; line-height:60px; text-align:center; z-index:9998;}

Tambien el codigo script para el botón svg subir arriba, adicionarlo en un archivo link script , no necesariamente en el head.

$(document).ready(function(){irArriba();}); function irArriba(){$('.ir-arriba').click(function(){ $('body,html').animate({ scrollTop:'0px' },1000); }); $(window).scroll(function(){if($(this).scrollTop() > 0){ $('.ir-arriba').slideDown(600); }else{ $('.ir-arriba').slideUp(600); }}); $('.ir-abajo').click(function(){ $('body,html').animate({ scrollTop:'1000px' },1000); });}

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *