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:
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:
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:
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.
