{

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 CSS id selector. This example change the button style’s background-color, font-weight, font-size, color.

Here is an code for html button css font styles example

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

Render the button as

How to change button color on hover with css?

This example explains about 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 element on hovering effect.

On hovering the button,

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

Here is an 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


CSS button disabled styles examples

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

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

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

Html button is coded with id=button2

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

Displayed the button below


How to remove border color from a button on focus with css and html.

By default border button color is displayed in the browser. In Chrome, a Blue border exists, In other browser 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 style 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: po;
}
button:focus{
  outline:none;
  box-shadow: none;
}
THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.