CSS Button Generator

To construct a button in HTML, we use the button tag. However, we may customize the buttons using CSS attributes. We can develop user interaction and event processing with the aid of buttons. They are one of the most often utilized components on websites.

Typically, buttons are used during form submission to see or obtain information.

CSS Buttons are used to beautify web pages by applying different stylistic attributes to the button. The processing of events and user interaction both employ buttons. We must click on buttons to access information or complete a form. In HTML, buttons are created with the button element.

HTML Button Creation Instructions

Use the <button> element to build a button.

This is a more user-friendly and semantic alternative than a generic container using the <div> element.

<!DOCTYPE html>
<html>
  <head>
    <title>Button styling in CSS</title>
  </head>
  <body>
    <button type="button">Submit</button>
  </body>
</html>

Output

Use a Stylish Button

<!DOCTYPE html>
<html>
  <head>
    <title>Button styling in CSS</title>
    <style>
      button {
        display: inline-block;
        background-color: pink;
        padding: 30px;
        width: 400px;
        color: black;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <button type="button">click</button>
  </body>
</html>

Output

The first styles we're adding are:

Display: inline-block to allow us to increase the button's width and height.
Background-color: The background color is pink. Adding a fancy background color.
Padding: button padding of 30px gives our button a little more space on all four sides.
Width: 400 pixels gives a 400-pixel width.
text-align: center; puts our text in the center;
Color: black makes our click text black

We will now use the border property to round our boundaries. Let's also enlarge our text. The following lines to the code:

<!DOCTYPE html>
<html>
  <head>
    <title>Button styling in CSS</title>
    <style>
button {
  display: inline-block;
  background-color: lightblue;
  padding: 50px;
  width: 400px;
  color: black;
  text-align: center;
  border: 5px double black; 
  border-radius: 20px;
  font-size: 30px;
}
</style>
  </head>
  <body>
    <button type="button">click</button>
  </body>
</html>

Output

To have the handicon while moving the cursor to the button, let's add cursor: pointer and give it a little margin of 7 pixels, so:

<!DOCTYPE html>
<html>
  <head>
    <title>Button styling in CSS</title>
    <style>
button {
  display: inline-block;
  background-color: lightblue;
  padding: 50px;
  width: 400px;
  color: black;
  text-align: center;
  border: 5px double black; 
  border-radius: 20px;
  font-size: 30px;
  cursor: pointer; 
  margin: 19px; 
}
</style>
  </head>
  <body>
    <button type="button">click</button>
  </body>
</html>

Output

We must be aware of a slight variation in this situation. Moving the mouse to the click text in the preceding example will change to a hand. But as soon as we move the mouse in its direction, the entire button will transform into a hand!

Style of Hover State

The final stage involves styling the hover state so that the user receives visual feedback when the button's status changes.

<!DOCTYPE html>
<html>
  <head>
    <title>Button styling in CSS</title>
    <style>
button:hover {
  background-color: red;
}
button{
  display: inline-block;
  background-color: lightblue;
  padding: 50px;
  width: 400px;
  color: black;
  text-align: center;
  border: 5px double black; 
  border-radius: 20px;
  font-size: 30px;
  cursor: pointer; 
  margin: 19px; 
}
</style>
  </head>
  <body>
    <button type="button">click</button>
  </body>
</html>

Output

The color will change to red when we point at the click button. Hover's hue changes happen too quickly and could be more pleasant.

Let's add transition now, being cautious about utilizing it in the button element rather than in the hover state.

Basic Button Styling

The button element may be styled using a variety of CSS attributes, some of which are covered here.

The button's background color may be changed using the background color attribute.

Syntax:

element {
     background-color: color_name;
}

Example: In this case, the button has a background color applied as a basic style attribute.

<!DOCTYPE html>
<html>

<head>
<title>Background Color of a button</title>
<style>
.button {
border: 10px black;
color: black;
text-align: center;
font-size: 40px;
}
.b1 {
background-color: red;
}
.b2 {
background-color: green;
}
.b3 {
background-color: blue;
}
.b4 {
background-color: yellow;
}
</style>
</head>

<body>
<button class="button b1">Red</button>
<button class="button b2">Green</button>
<button class="button b3">Blue</button>
<button class="button b4">Yellow</button>
</body>
</html>

Output

Sizes of Buttons

To alter a button's font size, use the font-size property:

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  background-color: pink; 
  border: none;
  color: black;
  padding: 20px 30px;
  text-align: center;
  display: inline-block;
  margin: 5px 7px;
  cursor: pointer;
}

.button1 {font-size: 16px;}
.button2 {font-size: 18px;}
.button3 {font-size: 20px;}
.button4 {font-size: 22px;}
.button5 {font-size: 24px;}
</style>
</head>
<body>

<h2>Button Sizes</h2>

<p>Altering the font size of a button by using font-size property:</p>


<button class="button button1">16px</button>
<button class="button button2">18px</button>
<button class="button button3">20px</button>
<button class="button button4">22px</button>
<button class="button button5">24px</button>

</body>
</html>

Output