Crear un botón con Html Css

¿Cómo hacer un botón con CSS y HTML?

Dividir layout a la mitad con CSS

¿Cómo hacer un botón con CSS y HTML? para una página web

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

VER DEMO

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.

Con la etiqueta button
Con un enlace
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>

Talvez tiene el código fuente para descargar

Ver Código Fuente

Redactado por: , Leido 2430 veces

Compartir enlace del tutorial

Link Whatsapp Messenger Facebook Twitter

Aprende más sobre CSS

1 ¿Qué es una hojas de estilos CSS? 2 Vincular un hoja de estilos CSS 3 Centrar un div con CSS 4 Aplicar CSS en una página web 5 CSS en el Head 6 Aplicar efectos animados con transition 7 Poner imagen en un div responsive 8 Posicionar elementos o divs con CSS 9 Estilo hoja de notas con CSS puro 10 Diseñar iconos burger y doots 11 Agregar efecto degradado a texto 12 Aprende a usar Animate.css rápido y fácil 13 Diseñar ventana modal responsive 14 Ajustar texto a una imagen shape-outside 15 Diseñar un menu responsive 16 Diseñar el background en 50% de un H1 17 Hola Mundo con CSS 18 Timeline en CSS sencillo 19 Diseño de Card con CSS 20 Animar elementos con CSS 21 Texto Circular con CSS y JS 22 Card 3d flip básico con perspective 23 Menú CSS con animación circular 3D 24 Diseño de una Layout Responsive 25 Dividir layout a la mitad con CSS 26 Crear un botón con Html Css 27 Diseño de un Card Animado con CSS 28 Menú Hamburguesa Animado con CSS 29 Optimizar CSS en una página web