<button>
<!DOCTYPE html>
<html lang="es">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Botón usando button</title>
<style>
button {
background-color: blue;
color: white;
border: none;
padding: 10px 20px;
font-size: 16px;
font-family: Arial;
cursor: pointer;
}
button:hover {
background-color: darkblue;
}
</style>
</head>
<body>
<button>Botón</button>
<script>class RocketElementorAnimation{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}_detectAnimations(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this._listAnimationSettingsKeys(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach(t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this._animateElement(t)}catch(t){}})}_animateElement(t){const e=JSON.parse(t.dataset.settings),i=e._animation_delay||e.animation_delay||0,n=e[this.animationSettingKeys.find(t=>e[t])];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let s=setTimeout(()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this._removeAnimationSettings(t,e)},i);window.addEventListener("rocket-startLoading",function(){clearTimeout(s)})}_listAnimationSettingsKeys(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach(t=>{e.forEach(e=>{i.push(t+e)})}),i}_removeAnimationSettings(t,e){this._listAnimationSettingsKeys().forEach(t=>delete e[t]),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorAnimation;requestAnimationFrame(t._detectAnimations.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorAnimation.run);</script></body>
</html>
2. Botón usando HTML y CSS
<!DOCTYPE html>
<html lang="es">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Botón usando HTML y CSS</title>
<style>
.custom-button {
background-color: blue;
color: white;
border: none;
padding: 10px 20px;
font-size: 16px;
font-family: Arial;
cursor: pointer;
display: inline-block;
text-align: center;
text-decoration: none;
}
.custom-button:hover {
background-color: darkblue;
}
</style>
</head>
<body>
<a href="#" class="custom-button">Botón</a>
</body>
</html>
Para este ejemplo, primero necesitas una imagen de botón. Vamos a suponer que tienes una imagen llamada boton.png que tiene el mismo tamaño y estilo que los botones anteriores. Puedes ajustar el tamaño de la imagen según sea necesario.
<!DOCTYPE html>
<html lang="es">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Botón usando una imagen</title>
<style>
.image-button {
background: url('button.png') no-repeat center center;
background-size: contain;
width:81.81px; /* Ajusta el ancho de la imagen */
height: 40.8px; /* Ajusta la altura de la imagen */
border: none;
cursor: pointer;
}
.image-button:hover {
filter: brightness(0.9);
}
</style>
</head>
<body>
<button class="image-button" onclick=""></button>
</body>
</html>