En documentos HTML, el usuario puede utilizar diferentes elementos, como tablas, formularios, campos de texto, imágenes y botones. Los botones en las páginas web se utilizan para realizar cualquier acción o para generar cualquier evento en un botón Haga clic. También se puede utilizar para solicitar cualquier otra página web. Los desarrolladores integran botones en páginas web en diferentes estilos y formas.

Este tutorial demostrará:

• Cómo hacer/crear un botón en HTML?
• Cómo hacer/crear un botón círculo usando propiedades CSS?

Cómo hacer/crear un botón en HTML?

Si el usuario quiere hacer un botón en HTML, pruebe las instrucciones dadas.

Paso 1: crear un contenedor Div

Primero, usa el ""Elemento para crear un contenedor" div ". Además, agregue un "identificación"Atributo con un valor específico de acuerdo con sus preferencias.

Paso 2: Insertar encabezado

A continuación, inserte un rumbo del nivel uno utilizando el "

" elemento. Luego, incruste el texto de encabezado entre el "

"Etiquetas.

Paso 3: Crear botón

Cree un botón en HTML utilizando el ""Etiqueta junto con el"tipo"Atributo como"entregar":

Botón CSS Circle

Entregar

Se puede observar que el botón se ha creado con éxito:

Ahora, avance hacia la siguiente sección para hacer el botón circular.

Cómo hacer/crear un botón círculo usando propiedades CSS?

El "radio fronterizoSe utiliza la propiedad para hacer el botón en forma de círculo. Esta propiedad establece las esquinas del elemento de cada lado.

Para hacerlo, mire el procedimiento paso a paso dado.

Paso 1: Contenedor de estilo "Div"

Primero, acceda al "div"Contenedor utilizando el nombre de clase"#Circle-BTN"Y aplique las siguientes propiedades CSS para el estilo:

#Circle-BTN
Altura: 200px;
Ancho: 200px;
margen: 50px;
relleno: 80px;
borde: 3px sólido RGB (23, 8, 228);
Color de fondo: Blanchedalmond;

Aquí:

• El "alturaSe utiliza la propiedad para especificar la altura del elemento.
• "ancho"Define el tamaño del elemento horizontalmente.
• "margen"Se usa para asignar el espacio fuera del borde definido.
• "relleno"Especifica el espacio dentro del límite.
• "borde"Asigna un límite alrededor del elemento.
• "color de fondoLa propiedad se utiliza para especificar el color en la parte posterior del elemento.

Producción

Paso 2: Haga el botón Círculo

Ahora, acceda al botón por nombre de la etiqueta y aplique las propiedades dadas en el botón para que sea circular:

botón
bloqueo de pantalla;
Altura: 150px;
Ancho: 150px;
Radio fronterizo: 50%;
borde: 1px rojo sólido;

La descripción del código anterior es la siguiente:

• El "mostrar"La propiedad CSS se usa para especificar el comportamiento de visualización del elemento, como si el elemento es un bloque o en línea.
• "radio fronterizoSe utiliza la propiedad para establecer los bordes de elementos redondos desde todos los lados. En nuestro escenario, el valor de esta propiedad se establece como "50%"Para hacer el botón alrededor de todos los lados.

Se puede notar que el botón Circle se ha creado con éxito:

Paso 3: Aplicar el efecto "flotar" en el botón

Aplica el "flotar"Pseudo clase para agregar el efecto de desplazamiento en el botón:

Botón: Hover
Color: RGB (247, 274, 248);
Color de fondo: CadetBlue;

Sobre el "Botón: Desconocido", La propiedad CSS"color de fondo"Se utiliza para establecer el color del fondo, y"color"Se usa para especificar el color del texto.

Producción

Has aprendido el método para crear un botón círculo en CSS.

Conclusión

Para crear un botón círculo en CSS, primero, cree un botón simple utilizando el ""Etiqueta en html. Luego, aplique el "radio fronterizo"Propiedad que establece los bordes del elemento alrededor de todos los lados. El valor del "Radio fronterizo" se especifica como "50%"Para hacer el botón circular. Esta publicación ha explicado el procedimiento para hacer el botón de círculo en CSS.