El html ""Es un elemento activado por el usuario que realiza cualquier acción al hacer clic. Es un componente clave de los formularios basados ​​en la web que generalmente se usan para enviar el formulario. Además, también se utiliza para moverse a otra página, incrustar las imágenes en clic y realizar otras operaciones requeridas. Los usuarios también pueden aplicar propiedades de CSS para diseñar el botón, como la alineación del botón en todas las direcciones, el efecto de desplazamiento, el borde, etc.

Este tutorial examinará:

• Cómo hacer/crear un botón en un "div"?
• Cómo centrar un botón dentro de un "div"?
• Cómo diseñar un botón dentro de un "div"?

Cómo hacer/crear un botón en un "div"?

Para hacer un botón en un "div"Elemento, pruebe las instrucciones dadas.

Paso 1: crear un contenedor Div

Inicialmente, utilice el ""Etiqueta para crear un"div"Contenedor y asignarlo un"identificación" atributo "principal".

Paso 2: inserte un encabezado

A continuación, inserte un encabezado con la ayuda del "

" etiqueta. Incrustar el texto de encabezado entre las etiquetas de encabezado agregadas.

Paso 3: Agregue otro contenedor "div"

Agrega otro "div"Contenedor junto con la clase"btn-centro".

Paso 4: Crear botón

Para crear un botón, utilice el ""Etiqueta y especifique el"tipo"Atributo como"entregar". Luego, incruste algún texto entre ""Etiquetas que se mostrarán en el botón:

Haga clic en el botón Enviar

Entregar

Se puede notar que el botón se ha creado en el contenedor:

Cómo centrar un botón dentro de un Div?

Para alinear un botón en el centro dentro de un "div"Elemento, hemos enumerado algunos métodos:

• Método 1: Centre un botón dentro de un "Div" utilizando la propiedad "Pantalla"
• Método 2: Centra un botón dentro de una propiedad "DIV" usando la propiedad "Posición"
• Método 3: Centra un botón dentro de una propiedad "Div" que usa "Transformar"

Método 1: Centra un botón dentro de un DIV usando la propiedad "Pantalla"

Los usuarios pueden utilizar el CSS "mostrar"Propiedad para centrar el botón en un"div". Para hacerlo, pruebe las instrucciones establecidas.

Paso 1: Elemento de estilo "div"

Para diseñar el "div"Element, primero, accedirlo con la ayuda de la identificación asignada"#-Div principal", dónde "#"Es un selector de identificación de CSS. A continuación, aplique las siguientes propiedades de CSS:

#principal-div
borde: 3px sólido RGB (7, 39, 223);
margen: 20px 50px;
Color de fondo: aguamarina;
Botón de relleno: 20px;

Aquí:

• "bordeLa propiedad se utiliza para especificar el límite alrededor de un elemento.
• "margen"Asigna el espacio fuera del límite definido.
• "color de fondo"Se usa para establecer el color de fondo del elemento.
• "fondo acolchado"Define un espacio dentro del botón del elemento.

Producción

Paso 2: Centra el botón en el contenedor "div"

Ahora, acceda al botón utilizando el atributo de clase ".btn-centro". Luego, aplique las propiedades codificadas a continuación:

.BTN-Center
Pantalla: Flex;
Justify-Content: Center;
Alineación de ítems: Centro;

En el fragmento de código anterior:

• "mostrar"La propiedad especifica el comportamiento de visualización de un elemento. Por ejemplo, el valor de esta propiedad se establece como "doblar".
• "centro de justificación"Se usa para alinear los elementos del contenedor de manera flexible horizontalmente con el eje principal.
• "ítems alineadosSe utiliza la propiedad para especificar la alineación predeterminada dentro del contenedor de la cuadrícula o flexión para los elementos.

Producción

Método 2: Centra un botón dentro de un DIV usando la propiedad "Posición"

Para centrar un botón usando el "posición"Propiedad, primero, acceda a la"div"Contenedor usando la identificación"#-Div principal"Y aplique las propiedades CSS mencionadas a continuación:

#principal-div
Altura: 150px;
Posición: relativo;
margen: 20px 70px;
borde: 3px doble RGB (3, 39, 243);
Text-Align: Center;

Aquí:

• "altura"La propiedad especifica la altura para el elemento definido.
• "posición"Se utiliza para asignar la posición del método al tipo de elemento.
• "texto alineado"Se usa para establecer la alineación del texto.

Producción

Método 3: Centra un botón dentro de una propiedad "Div" que usa "Transformar"

Colocar un borde en un centro dentro de un "div", Utiliza el"transformar"Propiedad CSS. Para hacerlo, pruebe las instrucciones dadas.

Paso 1: encabezado de estilo

Primero, acceda al encabezado con el nombre de la etiqueta "H1":

H1
Text-Align: Center;

Luego, aplique el "texto alineadoPropiedad para establecer la alineación del texto en el centro.

Paso 2: Centra un botón dentro del contenedor "div"

A continuación, acceda al segundo "div"Elemento que contiene el botón con la ayuda de la clase asignada".btn-centro"Y aplica las propiedades dadas:

.BTN-Center
Posición: Absoluto;
arriba: 50%;
Izquierda: 50%;
transformar: traducir (-50%, -50%);

Aquí:

• El "posición"La propiedad se establece como"absoluto"Para colocar el elemento en relación con el antepasado más cercano.
• "arriba" y "izquierdaLas propiedades se utilizan para configurar la posición del elemento desde los lados superior e izquierdo.
• La propiedad "transformar" se usa para transformar el elemento usando el "traducir()" método. Este método mueve un elemento desde su posición actual de acuerdo con los parámetros proporcionados junto con el "X y Y"Eje:

Cómo diseñar el botón dentro de un "div"?

Para diseñar el botón dentro de un "div"Elemento, primero, acceda al botón con el nombre de la etiqueta"botón”Y aplique las propiedades CSS establecidas:

botón
Altura: 50px;
Ancho: 80px;
Border-Radius: 50px;
Color: RGB (58, 15, 250);
negrita;
Color de fondo: RGB (235, 193, 9);

La descripción de las propiedades aplicadas es la siguiente:

• El "altura" y "ancho"Las propiedades establecen el tamaño del elemento.
• "radio fronterizo"La propiedad crea las esquinas redondeadas del elemento límite.
• "color"Se utiliza para especificar el color de texto del elemento.
• "fuente"Define el grosor del texto.

Se puede observar que el botón tiene el estilo de acuerdo con los requisitos:

Esto se trata de cómo centrar el botón dentro de un contenedor Div.

Conclusión

Para centrar un botón dentro de un "div", Primero, crea un""Elemento y asignarlo"clase" o "identificación" atributo. Después de eso, haga un botón utilizando el "" etiqueta. Luego, para centrar un botón dentro de un "div"Elemento, primero acceda al contenedor y aplique la propiedad CSS"mostrar","transformar", o "posición"Para colocar un botón en el centro. Este tutorial ha explicado diferentes métodos para centrar el botón dentro de un "div" elemento.