| Viewed 217 times

how to design button in html


how to design button in html

1 Answer
Mikdam Qandeel
Answered
3

Each button in HTML has the same default style, and it's doesn't look pretty at all. So, let's create the button style you will like.

At the beginning create a simple button in HTML using <button> tag.

Example:

<button>DefaultButton</button>

Output:

Now the time to put your beautiful touches on that button, let's start using CSS code.

Start with removing the border, change the font and background color, adding some padding and margin like this:

button {
  border: none;
  color: white;
  background-color: #4CAF50; 
  padding: 15px 32px;
  margin: 4px 2px;
}

Output:

What about rounded buttons, using border-radius property.

Example:

button {
  border: none;
  color: white;
  background-color: red; 
  padding: 15px 32px;
  margin: 4px 2px;
  border-radius: 10px; /* or use 10%*/
}

Output:

Why not using the border, here we are:

button {
  border: none;
  color: balck;
  background-color: white; 
  padding: 15px 32px;
  margin: 4px 2px;
  border-radius: 10px;
  border: 2px solid red;
}

Output:

And now make it Hoverable Buttons, using :hover selector with transition-duration property.

Example:

button:hover {
  color: white;
  background-color: red;
  transition-duration: 0.4s;
}

Output:

style button in html

And that's it. here are some amazing styles: