Inicio » Blog » HTML + CSS

13 agosto, 2021

Crear un botón con Html Css

Para crear un botón declaramos una etiqueta generalmente aref o button o p etc la identificamos con un ID luego aplicamos estilos con CSS para darle diseño

Suscríbete a nuestro canal en Youtube

Suscríbirse

Los botones en una página web son elementos muy importantes y muy usados para llamar una acción de parte del usuario.

¿Qué es un botón en una página web?

Un botón es un elemento visual que generalmente esta ubicado para que el usuario haga click por una acción que le sea de su interés, por tanto debe tener un aspecto visual muy atractivo y eficiente cuidando  el diseño UI/UX.

Para crear un botón declaramos una etiqueta generalmente button luego aplicamos estilos con CSS para darle diseño. Ampliando un poco 

  • La etiqueta para crear un botón es <button >
  • También podemos usar un ahref
  • o incluso un elemento p, span, etc.

La cuales pueden cumplir la misma funcionalidad de un botón, agregando JS o no.

¿Cómo crear un botón HTML y CSS?

Para crear un botón tenemos varias formas, veamos algunas.

  1. Con la etiqueta button
  2. Con un enlace
  3. Con un ID

Con Button

Simplemente usamos la etiqueta de la siguiente manera

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BOTONES</title>
</head>
<body>
    <!--FORM-->
    <H1>BOTÓN FORM</H1>
    <form action="" method="get">
        <input type="text" name="nombre">
        <button type="submit" class="boton_form" name="btn">ENVIAR FORM</button>
    </form>    

    <H1>BOTÓN A</H1>
    <a href="destino.html" class="boton_a">ENVIAR LINK</a>

    <H1>BOTÓN TAG</H1>
    <span id="btn" class="boton_tag" >ENVIAR LINK</span>
    <script>
        document.getElementById("btn").addEventListener("click",e=>{
            window.location.href = "destino.html"
        })
    </script>
    <style>
        .boton_form{ padding: 10px 20px; background-color: blueviolet; color: white; border: none; border-radius: 5px; cursor: pointer;}
        .boton_a{padding: 10px 20px; background-color: blueviolet; color: white; border-radius: 5px; text-decoration: none;}
        .boton_tag{padding: 10px 20px; background-color: blueviolet; color: white; border-radius: 5px; text-decoration: none; width: 180px; text-align: center; cursor: pointer;}


    </style>

</body>
</html>

 


Leido 4533 veces

Descarga el código fuente HTML + CSS

Recurso descargado 185 veces

USD

Descargar Código Fuente

Compartir link del tutorial con tus amigos


Aprende más sobre HTML + CSS

Cursos de programación

Codea Codea App

México, Colombia, España, Venezuela, Argentina, Bolivia, Perú

© Todos los derechos reservados Codea App | ...de frente al código!!! | 2020 - 2023