Botón flotante

Botón flotante

Añade un botón flotante a tu web con el estilo que más te guste.

add_action('wp_head', 'we_side_btn');
function we_side_btn(){
?>

<style>
/* Estilo global del botón */
	.buttom-sticky {
		position: fixed;
		width: auto !important;
		height: 50px !important;
		z-index: 999999;
	}
	.buttom-sticky a {
		background-color: #d24632;
		border: 0px solid;
		border-radius: 0px;
		color: #ffffff;
		cursor: pointer;
		font-size: 16px;
		font-weight: 600;
		letter-spacing: 2px;
		padding: 10px 15px;
		text-decoration: none;
		text-transform: uppercase;
	}
	.buttom-sticky a:hover {
		background-color: #387AB1 !important;
		text-decoration: none;
	}
	
	/*posiciones de los botones por su ID*/
	#side-btn{
		top: 50%;
		left: -50px;
		transform: rotate(-90deg) !important;
	}
</style>

<div id="side-btn" class="buttom-sticky" aria-hidden="false">
	<a href="https://webcbz.com/" target="_blank" rel="noopener">Botón de muestra</a>
</div>

<?php
};

El contenido de este artículo es código CSS. Para insertarlo en tu sitio web puedes añadir el código en la sección "CSS Adicional" del personalizador de WordPress (Apariencia > Personalizador), o bien añadirlo en la hoja de estilos del tema hijo (child theme) que tengas activo (por lo general, en el archivo style.css).

¿Te ha gustado este código? Coméntalo con códigosWP:

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

Scroll al inicio