Botón Javascript Css

| | | | | | | |

Al diseñar un sitio web, a menudo tendrá un botón que desea que aparezca de cierta manera. Por ejemplo, es posible que desee que un botón tenga un color de fondo diferente al de otros elementos de la página para atraer la atención del usuario hacia el botón.

Usando CSS, los desarrolladores pueden crear botones con estilos. CSS le permite cambiar entre otras cosas.

Color, tamaño de texto, borde, ancho y alto de un botón. Este tutorial discutirá, con ejemplos, cómo usar una serie de propiedades CSS para diseñar un HTML. botón. Cuando termine de leer este tutorial, será un experto en diseñar botones con CSS.

Descripción general de los botones

Puede definir un botón de varias formas HTML. Los dos enfoques más comunes son Encuentre su coincidencia de Bootcamp

Si queremos diseñar nuestro botón, en otras palabras, para personalizar el aspecto de la página, tenemos que usar css. En este artículo, discutiremos cómo hacer lo siguiente en un botón: ..

  • Cambiar el color de fondo
  • Cambiar el color del texto
  • Cambiar el tamaño del texto.
  • Añadir relleno.
  • redondea las esquinas.
  • Agrega un borde de color.
  • Úsalo: ... función de desplazamiento
  • Agrega sombra
  • Cambiar ancho
  • desactivar
  • Animarlo.

También discutiremos cómo crear grupos de botones horizontales y verticales.

Back - plane color

Durante el diseño de un botón, lo primero que querrá hacer es establecer un color de fondo - plan para el botón. De forma predeterminada, un botón tiene un fondo blanco y texto negro Al usar el color de fondo CSS, c y cambiar el color de fondo de un botón.

Suponga que está diseñando un botón para un sitio web y desea que el botón tenga un fondo rosa. Podemos cambiar el color de nuestro botón usando el siguiente código CSS:

Nuestro código devuelve:

Screen Shot 2020 04 03 al 13.10.32

Usando la propiedad de color de fondo, cambiamos el color de fondo de nuestro botón a rosa. Podemos cambiar el color de fondo de nuestro botón a un color usando esta propiedad.

Color del texto

Para cambiar el color del texto de un botón, puede usar el color property. a button y queremos que el botón tenga un fondo rosa y el texto en verde. Podríamos crear este botón usando el siguiente código:

Nuestro código devuelve:

 ad Dtfk7RIpGyKmzp9eDBrGsFWlOFbIn WMLsfL2IlEEs4TFEHnscuJ3bhsZdx5GEz3zR2bv5Ec3W2eH49suj BISbjhj Ib0gv 4ETJxxUJRp Mxzhop8cvg2 que utilizamos en la figura verde <x> 8 Gy> 8gy>> usamos la propiedad MxzPG8cvG2: para establecer el color del texto en ou r botón verde.</p><h2>Tamaño del texto</h2><p>Puedes usar la propiedad CSS font-size para establecer el tamaño del texto en un botón. Digamos que queremos que el texto tenga un tamaño de fuente de 20 px. Podemos lograr esto usando el siguiente código:</p> <p>Nuestro código devuelve:</p><figure class = Captura de pantalla 2020 03 25 A 08.33.23

Nuestro botón tiene el mismo tamaño que antes, pero ahora el tamaño de los caracteres en el interior es de 20 píxeles. Usamos el atributo de tamaño de fuente para establecer el tamaño del texto en nuestro botón.

Relleno

Al diseñar un botón, puede decidir que desea una cierta cantidad de espacio entre el texto dentro de un botón y las paredes exteriores del botón. Aquí es donde entra en juego la propiedad de amortiguación.

La propiedad de relleno utiliza indicadores de longitud (px, em y etc.) o valores porcentuales ‚Äã‚Äãpara definir una cierta cantidad de espacio entre los botones de texto y sus bordes.

Supongamos que queremos crear dos botones en nuestra página. debe tener un relleno de 20px Podemos crear estos botones usando el siguiente código:

Nuestro código devuelve:

 Captura de pantalla 2020 03 25 al 08.39.39

Puede usar la propiedad border-radius para crear botones rectangulares con esquinas redondeadas. Aquí hay tres ejemplos de código que usan la propiedad border-radius. Para ilustrar el efecto de diferentes tamaños de radio, cada ejemplo utiliza un radio de borde de tamaño diferente.

Nuestro código devuelve:

 Captura de pantalla 2020 03 25 a las 08.49.42