Multiple ways to apply CSS styles to HTML button with examples

Multiple ways to apply CSS styles to HTML button with examples

In this blog, Learn different styles applied to the HTML button with examples.

How do style a button in CSS and HTML examples

Let’s create a button in HTML. use button tag

  <button type="button" id="button"> Button</button>

or input tag

<input type="button" value="button" />

It is easy to apply styles using the CSS id selector. This example changes the button style’s background-color, font-weight, font-size, and color.

Here is a code for HTML button css font styles example

#button {
  background-color: blue;
  font-weight: 700;
  font-size: 20px;
  color: white;
}

Render the button as

<style>
# button{
  background-color: blue;
  font-weight: 700;
  font-size: 20px;
  color:white;
}

</style>

<button type="button" id="button"> Button</button>

How to change button color on hover with CSS?

This example explains displaying the button with the default color.

On hovering the button, Change the button background color.

CSS provides :hover pseudo-classes that apply to HTML elements on the hovering effect.

On hovering the button,

  • Changed the button background-color to green
  • Change the cursor on the button to pointer(hand)

Here is a CSS code for button hover styles

#button1 {
  background-color: red;
  font-weight: 700;
  font-size: 20px;
  color: white;
}
#button1:hover {
  background-color: green;
  cursor: pointer;
}

The same above CSS code can be written in SASS code using parent selector(&)

#button1 {
  background-color: red;
  font-weight: 700;
  font-size: 20px;
  color: white;
  &:hover {
    background-color: green;
    cursor: pointer;
  }
}

Here is an example

<button type="button" id="button1">Click me</button>

Render the button with hover as below

<style>
  button {
    background-color: red;
    font-weight: 700;
    font-size: 20px;
    color: white;
  }
  button:hover {
    background-color: green;
    cursor: pointer;
  }
</style>
<br />
<button type="button">Click me</button>

CSS button disabled styles examples

Sometimes, We want to disable the button using CSS styles.

Button styles contain cursor: not-allowed and pointer-events: none; that disables the cursor and do not show the hand pointer on the button.

#button2 {
  cursor: not-allowed;
  pointer-events: none;
  color: #d0d0d0;
  background-color: #ffffff;
}

The html button is coded with id=button2.

<button type="button" id="button2">Disabled</button>

Displayed the button below

<style>
  # button2 {
    cursor: not-allowed;
    pointer-events: none;
    color: #d0d0d0;
    background-color: #ffffff;
  }
</style>
<br />
<button type="button" id="button2">Disabled</button>

How to remove border color from a button on focus with CSS and HTML

By default border, and button color is displayed in the browser. In Chrome, a Blue border exists, In other browsers black border exists.

How do remove the borderline from a button?

outline CSS attribute removes the borderline from a button.

You can apply outline and box-shadow styles to none

outline: none;
box-shadow: none;

Here is an example

button {
  background-color: yellow;
  font-weight: 700;
  font-size: 20px;
}
button:hover {
  background-color: green;
  cursor: position;
}
button:focus {
  outline: none;
  box-shadow: none;
}