Skip to main content

Cómo Cambiar La Fuente De Un Botón: Guía Detallada

  • Victorino Guillen Ramos
  • Software

El dise o de botones en las p ginas web es un componente importante de la interfaz de usuario. Afecta la apariencia general de un sitio y puede mejorar su impresi n en el visitante. Un aspecto del dise o del bot n es elegir la fuente adecuada. En este art culo, veremos c mo cambiar la fuente de un bot n a trav s de HTML y CSS.

Paso 1: Crear un bot n

El primer paso es crear un bot n con c digo HTML. Para hacer esto, usaremos la etiqueta y estableceremos el texto deseado dentro de ella. Por ejemplo:

Emp jame!

Ahora nuestro bot n est listo, pero tiene la fuente predeterminada.

Paso 2: Cambiar la fuente con CSS

Para cambiar la fuente del bot n, podemos usar CSS. Para empezar, necesitamos establecer una clase para el bot n. Por ejemplo, podemos usar una clase . Luego, en el archivo CSS o dentro de una etiqueta en la p gina, podemos escribir el siguiente c digo:

En el ejemplo anterior, especificamos la fuente Arial, sans - serif, Tama o de fuente de 16 p xeles y negrita.

Paso 3: Aplicar una clase al bot n

Para aplicar una clase a nuestro bot n, agregue el atributo class a nuestra etiqueta HTML .

Emp jame!

Ahora nuestro bot n tendr la fuente que especificamos.

En conclusi n

Cambiar la fuente de un bot n puede agregar atractivo a su sitio web y ayudar a atraer a los usuarios. Usando HTML y CSS, usted tiene el control total sobre el dise o de los botones en su sitio web. No tenga miedo de experimentar con diferentes Fuentes y configuraciones para encontrar el estilo m s adecuado para su bot n.

  1. C mo cambiar el estilo de fuente para un bot n
  2. Paso 1: Abrir el archivo con el c digo del sitio
  3. Paso 2: Encontrar la clase del bot n
  4. Paso 3: Agregar estilo de fuente
  5. Paso 4: Guardar y actualizar el sitio

C mo cambiar el estilo de fuente para un bot n

Puede usar CSS para cambiar el estilo de fuente del bot n en HTML. Aqu hay algunos ejemplos:

1. Uso del estilo en l nea:

Haz clic en m 
En este ejemplo, usamos el estilo CSS en l nea con el atributo "style". Especific  la fuente Arial y especific  sans-serif como una fuente alternativa para el caso de que Arial no est  disponible.
2. Usando un estilo externo con una clase:
Haz clic en m 
En este ejemplo, hemos creado una clase "Custom-button" dentro de la etiqueta . Luego aplicamos la clase al bot n para establecer el estilo de fuente deseado. En este caso, la fuente es Verdana, con un auricular Geneva, y el peso de la fuente es negrita.
3. Usando un estilo externo con id:
Haz clic en m 
Aqu  usamos el identificador "my-button" dentro de la etiqueta . Luego aplicamos un identificador al bot n para establecer el estilo de fuente deseado, as  como el fondo, el borde y otras propiedades del bot n.
Utilice estos ejemplos para cambiar el estilo de fuente de sus botones en HTML y crear un dise o  nico para su sitio web.
Paso 1: Abrir el archivo con el c digo del sitio
Antes de cambiar la fuente de un bot n en su sitio, debe abrir el archivo de la p gina web correspondiente.
1. Elija cualquier Editor de texto en su computadora (por ejemplo, Bloc de notas en Windows o Editor de Texto en Mac).
2. A continuaci n, abra el c digo de su sitio utilizando el sistema de archivos de su ordenador o Editor de c digo. Normalmente, los archivos HTML tienen una extensi n .html o .htm
2. En la ventana que se abre, se busca el c digo relacionado con el bot n. Busque el elemento 
 o 
, junto a las cuales pueden estar las clases o los identificadores. Las clases se especifican en el atributo 
class y los identificadores est n en el atributo 
id
.
Ejemplo de bot n con clase

                        
                    
font-family
  • . Esta propiedad le permite seleccionar la fuente deseada de la disponible en el equipo.
En el c digo HTML del bot n, agregue un atributo 
style
  •  y especificamos el valor de la propiedad 
Bot n
Tambi n puede utilizar varias Fuentes y asignarlas en orden de prioridad. Si una fuente no est  disponible en el equipo del usuario, el navegador aplicar  autom ticamente la siguiente fuente de la lista.
Por ejemplo, el siguiente c digo establecer  la fuente Arial, y si no est  disponible, Tahoma:
Bot n
Por lo tanto, puede elegir la fuente adecuada para su bot n y aplicarla con la propiedad CSS 
font-family
.
Medida 4: Guardar y actualizar el sitio

                        

                    
                

                    

                        

                            
Read also