How to Set the Size of the Button

The “<button>” element helps users to generate events or to take any action. Buttons can also be utilized for submitting the form and getting some information. Users can add any type of button to the web page, including round buttons, squares, rectangles, and many more. Furthermore, users can also set the size of the button by utilizing CSS’s “height” and “width” properties according to their choice.

This write-up will state:

How to Make/Create a Button in HTML?
How to Set the Size of the Button in HTML Using CSS Properties?

How to Make/Create a Button in HTML?

To make a button, first of all, make a “div” container by utilizing the “<div>” tag and inserting an “id” attribute with a specific value. Next, add a “<button>” element and embed some text to display on it:

<div id="btn-size">

<button> Submit</button>

</div>

It can be observed that the button has been created successfully:

How to Set the Size of the Button in HTML Using CSS Properties?

To set the size of the button, follow the mentioned procedure.

Step 1: Style “div” Container

Firstly, access the “id” attribute with the help of the “#” selector and the id name “btn-size”. Then, apply the below-listed properties for styling:

#btn-size{

margin: 50px 150px;

height: 100px;

width: 100px;

padding: 40px;

border: 3px solid rgb(23, 8, 228);

background-color: rgb(245, 191, 111);

}

Here:

The “margin” property is utilized for allocating the space outside of the element’s boundary.
“height” defines the height size of the element.
“width” sets the size of the width of the element.
“padding” allocates space inside the element’s boundary.
“border” is used to define a boundary around the element.
“background-color” is utilized for setting the background color to the defined element.

Output

Step 2: Set the Size of Button

Now, access the “<button>” element with the help of the tag name and apply the following properties to set the size of the button:

button{

background-color: rgb(127, 235, 145);

color: rgb(184, 130, 238);

width: 100px;

height:80px;

border-radius: 30%;

}

In the above code:

The “background-color” is used to set the background color of the button.
“color” specifies the text color.
“width” is used to set the width of the button. For instance, we have specified the width value as “100px”.
“height” sets the height of the button as “80px”
“border-radius” property defines the rounded element’s corners:

Step 3: Apply “:hover” Property on Button

Now, apply the “:hover” pseudo-class along with the button element to add the hover effect on the button:

button:hover{

background-color: rgb(16, 185, 190);

}

It can be noticed that the hover effect is added to the button that change the button color.

Conclusion

To set the button’s size, first, create a button with the help of the “<button>” element. Next, access the button in CSS by tag name and apply the “height” and “width” CSS properties to set its size. Furthermore, users can also apply other CSS properties, including “color” “button-radius” and “background-color” for styling. This post has demonstrated the procedure for setting the size of the button.