How To Style Buttons With CSS - W3docs

Trang chủ » Html Button Properties Style » How To Style Buttons With CSS - W3docs

Có thể bạn quan tâm

Styled buttons help you create cool websites. There are a lot of styles that you can apply to the buttons. Here is the guide to styling buttons.

1. Create a button

At first, create a <button> element.

<!DOCTYPE html> <html> <head> <title>Styling Buttons</title> </head> <body> <button type="button">Submit</button> </body> </html> Try it Yourself » Many developers also use the <a>, <input>, <span> or <div> tags.

2. Style your button

So, it is time to apply styles to your button. Let's do it step by step.

<!DOCTYPE html> <html> <head> <title>Styling Buttons</title> <style> button { display: inline-block; background-color: #7b38d8; padding: 20px; width: 200px; color: #ffffff; text-align: center; } </style> </head> <body> <button type="button">Submit</button> </body> </html> Try it Yourself »

We're starting by adding these styles:

  • display: inline-block to enable the ability to add width and height to our button
  • background-color: #7b38d8 a fancy background color for the button
  • padding: 20px makes a bit more room for our button in all four sides
  • width: 200px gives a 200px width
  • color: #ffffff makes our Submit text white
  • text-align: center; puts our text in the center

Let's see what we've got so far:

Submit

Now, we're going to round our borders and use the border property. Also, let's make our text a bit larger. So add these lines to the code:

button { display: inline-block; background-color: #7b38d8; padding: 20px; width: 200px; color: #ffffff; text-align: center; border: 4px double #cccccc; /* add this line */ border-radius: 10px; /* add this line */ font-size: 28px; /* add this line */ }

Here's the result

Submit

Much better, right?

Let's add cursor: pointer to have the handicon while bringing our cursor to the button and give it a bit margin of 5px, so :

button { display: inline-block; background-color: #7b38d8; padding: 20px; width: 200px; color: #ffffff; text-align: center; border: 4px double #cccccc; border-radius: 10px; font-size: 28px; cursor: pointer; /* add this line */ margin: 5px; /* add this line */ }

Here's the updated result, try to move your cursor towards the button!

Submit

You need to be aware of a tiny difference here. In the previous example, when we move the cursor to the Submit text, it'll be turned to a hand. But now the whole button will turn to a hand as soon as we move the mouse towards it!

3. Style the hover state

Your third step is to style the hover state to give visual feedback to the user when the button’s state changes.

button:hover { background-color: green; }

Here's the result, but we have a problem!

Submit

Changing the colour on hover is too fast, and it's not so pleasant!

So let's add transition and be careful that we have to use it in the button element, not in its hover state.

button { display: inline-block; background-color: #7b38d8; padding: 20px; width: 200px; color: #ffffff; text-align: center; border: 4px double #cccccc; border-radius: 10px; font-size: 28px; cursor: pointer; margin: 5px; -webkit-transition: all 0.5s; /* add this line, chrome, safari, etc */ -moz-transition: all 0.5s; /* add this line, firefox */ -o-transition: all 0.5s; /* add this line, opera */ transition: all 0.5s; /* add this line */ } button:hover { background-color: green; } Submit

I like it! So much better!

Now, as the last step, let's add functionality to our beautiful button. We want to open an alert whenever clicking on this button.

So click on the button below, and let's greet!

Submit

We just used onclick event of javascript and alert something on the screen after clicking the button!

<button type="button" onclick="alert('Hi from W3Docs!')">Submit</button>

Now let’s see an interesting example using the <button> element.

Example of styling a button created with the <button> tag:

<!DOCTYPE html> <html> <head> <title>Title of the document</title> <style> button { display: inline-block; background-color: #7b38d8; border-radius: 10px; border: 4px double #cccccc; color: #ffffff; text-align: center; font-size: 28px; padding: 20px; width: 200px; transition: all 0.5s; cursor: pointer; margin: 5px; } button span { cursor: pointer; display: inline-block; position: relative; transition: 0.5s; } button span:after { content: '\00bb'; position: absolute; opacity: 0; top: 0; right: -20px; transition: 0.5s; } button:hover { background-color: #f7c2f9; } button:hover span { padding-right: 25px; } button:hover span:after { opacity: 1; right: 0; } </style> </head> <body> <h2>Style buttons</h2> <button> <span>Submit</span> </button> </body> </html> Try it Yourself »

The codes you see here are similar to what we've done in the previous example.

Here, we used a span tag inside of the button. We can later use the :after pseudo-class to create a creative hover effect.

We'll place the arrow sign » on our button, which will show it on the hover effect of the mouse, with a smooth transition.

Here's the essential part of the above code:

button span:after { content: "\00bb"; /* HTML code of » sign */ position: absolute; /* its parent (button) is relative */ opacity: 0; top: 0; right: -20px; transition: 0.5s; }

Here's the result:

Submit

Example of styling a button created with the <span> tag:

<!DOCTYPE html> <html> <head> <title>Title of the document</title> <style> body { background: #560059; color: #eeeeee; font-family: Arial; font-size: 16px; } .wrapper { margin: 80px auto; text-align: center; width: 100%; position: relative; } .button { padding: 15px 100px; margin: 10px 4px; color: #ffffff; font-family: sans-serif; text-transform: uppercase; text-align: center; position: relative; text-decoration: none; display: inline-block; border: 1px solid; } .button::before { content: ""; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; z-index: -1; -webkit-transform: scaleY(0.1); transform: scaleY(0.1); transition: all 0.4s; } .button:hover { color: #b414ba; } .button:hover::before { opacity: 1; background-color: #f7c2f9; -webkit-transform: scaleY(1); transform: scaleY(1); transition: -webkit-transform 0.6s cubic-bezier(0.08, 0.35, 0.13, 1.02), opacity 0.4s; transition: transform 0.6s cubic-bezier(0.08, 0.35, 0.13, 1.02), opacity; } </style> </head> <body> <div class="wrapper"> <span class="button">Button 1</span> <span class="button">Button 2</span> </div> </body> </html> Try it Yourself »

The code above is the final code, and you can see the result in the "Try it Yourself" section.

Now let's break down the code and explain the tricky parts to make you understand it well. We explain that parts in snippets below as comments in front of each line.

We applied some general styles on body, and then we have a wrapper class which acts like a wrapper parent for two tags which in this example will be treated like buttons.

You can read the comments below for more explanation.

.button::before { content: ""; position: absolute; top: 0; left: 0; display: block; width: 100%; /* use 100% width of the button */ height: 100%; /* use 100% height of the button */ z-index: -1; /* make the hover effect behind the text in the button */ -webkit-transform: scaleY(0.1); /* for webkit engine browsers like chrome and safari */ transform: scaleY(0.1); /* move the hover effect a bit in Y axis*/ transition: all 0.4s; } .button:hover { color: #b414ba; } .button:hover::before { opacity: 1; background-color: #f7c2f9; -webkit-transform: scaleY(1); /* for webkit engine browsers like chrome and safari */ transform: scaleY(1); /* move the hover effect a bit in Y axis*/ transition: -webkit-transform 0.6s cubic-bezier(0.08, 0.35, 0.13, 1.02), opacity 0.4s; /* for webkit engine browsers like chrome and safari */ transition: transform 0.6s cubic-bezier(0.08, 0.35, 0.13, 1.02), opacity; }

Example of styling a button created with the <a> tag:

<!DOCTYPE html> <html> <head> <title>Title of the document</title> <style> body { background: #3b0044; color: #6098ff; font-family: sans-serif; font-size: 16px; } .wrapper { margin: 80px auto; text-align: center; width: 100%; position: relative; } .button { padding: 15px 100px; margin: 10px 4px; color: #ffffff; font-family: sans-serif; text-transform: uppercase; text-align: center; position: relative; text-decoration: none; display: inline-block; } .button { border: 1px solid transparent; -webkit-transition: all 0.4s cubic-bezier(0.5, 0.24, 0, 1); transition: all 0.4s cubic-bezier(0.5, 0.24, 0, 1); } .button::before { content: ""; position: absolute; left: 0px; bottom: 0px; z-index: -1; width: 0%; height: 1px; background: #003177; box-shadow: inset 0px 0px 0px #b6cdef; display: block; -webkit-transition: all 0.4s cubic-bezier(0.5, 0.24, 0, 1); transition: all 0.4s cubic-bezier(0.5, 0.24, 0, 1); } .button:hover::before { width: 100%; } .button::after { content: ""; position: absolute; right: 0px; top: 0px; z-index: -1; width: 0%; height: 1px; background: #a9c1e8; -webkit-transition: all 0.4s cubic-bezier(0.7, 0.25, 0, 1); transition: all 0.4s cubic-bezier(0.7, 0.25, 0, 1); } .button:hover::after { width: 100%; } .button:hover { border-left: 1px solid #b6cdef; border-right: 1px solid #6098ff; } </style> </head> <body> <div class="wrapper"> <a href="#" class="button">Button 1</a> <a href="#" class="button">Button 2</a> </div> </body> </html> Try it Yourself »

Let's learn what happens here in the essential parts of the code.

.button::before { content: ""; position: absolute; left: 0px; bottom: 0px; z-index: -1; /* make it behind the button */ width: 0%; /* first let it to be 0% of width */ height: 1px; background: #003177; box-shadow: inset 0px 0px 0px #b6cdef; display: block; -webkit-transition: all 0.4s cubic-bezier(0.5, 0.24, 0, 1); /* code for webkit engine browsers like safari and chrome */ transition: all 0.4s cubic-bezier(0.5, 0.24, 0, 1); /* add transition for the width change to be smooth */ } .button:hover::before { width: 100%; /* then on the hover effect, bring the width higher up to 100% */ }

Example of styling the <button> element:

<!DOCTYPE html> <html> <head> <title>Title of the document</title> <style> .container { position: absolute; top: 10%; } .button { border: none; display: block; text-align: center; cursor: pointer; text-transform: uppercase; outline: none; overflow: hidden; position: relative; color: #ffffff; font-weight: 600; font-size: 15px; background-color: #153f00; padding: 15px 50px; margin: 0 auto; } .button span { position: relative; z-index: 1; } .button:after { content: ""; position: absolute; left: 0; top: 0; height: 470%; width: 140%; background: #52b71f; -webkit-transition: all .5s ease-in-out; transition: all .5s ease-in-out; -webkit-transform: translateX(-100%) translateY(-25%) rotate(45deg); transform: translateX(-100%) translateY(-25%) rotate(45deg); } .button:hover:after { -webkit-transform: translateX(-9%) translateY(-25%) rotate(45deg); transform: translateX(-9%) translateY(-25%) rotate(45deg); } </style> </head> <body> <h2>Style button</h2> <div class="container"> <button type="button" class="button"> <span>Hover!</span> </button> </div> </body> </html> Try it Yourself »

Let's break down the tricky parts of the code!

But before that, please note that these examples just give you a hint or a whole idea of being creative with buttons to build or use on your web journey!

The best way to understand them is to open it in the demo section (Try it Yourself!) and play with the properties or have it in your code editor and check them.

We give you the hints and necessary tips and explanations that you may need along the way to understand it better.

So with that being said, let's explain some essential parts of the above code:

.button { border: none; display: block; text-align: center; cursor: pointer; text-transform: uppercase; outline: none; /* removes the default outline of button element */ overflow: hidden; /* hidden the part that's outside of the container div */ position: relative; color: #ffffff; font-weight: 600; font-size: 15px; background-color: #153f00; padding: 15px 50px; margin: 0 auto; } .button span { position: relative; z-index: 1; /* bring it in front of the button */ } .button:after { content: ""; position: absolute; left: 0; top: 0; height: 470%; /* change the value in demo to see the difference */ width: 140%; /* change the value in demo to see the difference */ background: #52b71f; -webkit-transition: all 0.5s ease-in-out; /* for webkit engine browsers like chrome and safari */ transition: all 0.5s ease-in-out; -webkit-transform: translateX(-100%) translateY(-25%) rotate(45deg); /* for webkit engine browsers like chrome and safari */ transform: translateX(-100%) translateY(-25%) rotate(45deg); } .button:hover:after { -webkit-transform: translateX(-9%) translateY(-25%) rotate(45deg); /* for webkit engine browsers like chrome and safari */ transform: translateX(-9%) translateY(-25%) rotate(45deg); }

Example of styling some <button> elements:

<!DOCTYPE html> <html> <head> <title>Title of the document</title> <style> body { font-size: 60%; background: #00abb7; } .container { padding: 50px; } button, button::after { -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } button { background: none; border: 4px solid #fff; border-radius: 10px; color: #ffffff; display: block; font-size: 1.6em; font-weight: bold; margin: 10px auto; padding: 2em 6em; position: relative; text-transform: uppercase; } button::before, button::after { background: #fff; content: ""; position: absolute; z-index: -1; } button:hover { color: #29f2e4; } .button1::after { height: 0; left: 0; top: 0; width: 100%; } .button1:hover:after { height: 100%; } .button2::after { height: 100%; left: 0; top: 0; width: 0; } .button2:hover:after { width: 100%; } .button3::after { height: 0; left: 50%; top: 50%; width: 0; } .button3:hover:after { height: 100%; left: 0; top: 0; width: 100%; } </style> </head> <body> <div class="container"> <button type="button" class="button1">Button 1</button> <button type="button" class="button2">Button 2</button> <button type="button" class="button3">Button 3</button> </div> </body> </html> Try it Yourself »

And here's another example, let's explain some tricky parts of it down below:

button, button::after { -webkit-transition: all 0.3s; /* for webkit engine browsers like chrome and safari */ -moz-transition: all 0.3s; /* for moz engine browsers like firefox */ -o-transition: all 0.3s; /* for opera browser */ transition: all 0.3s; } button::before, button::after { background: #fff; content: ""; position: absolute; z-index: -1; /* make it behind its container */ }

Example of styling a button created with the <input> tag:

<!DOCTYPE html> <html> <head> <title>Title of the document</title> <style> input { padding: 15px 100px; margin: 10px 4px; cursor: pointer; text-transform: uppercase; text-align: center; position: relative; } input:hover { opacity: 0.5; } </style> </head> <body> <input type="button" value="Button" /> </body> </html> Try it Yourself »

This example is pretty straight forward!

We just added a hover effect with the opacity of 0.5 , which is a simple but a good practice in web development world.

Thanks fro joining us, and hope to see you again soon!

Từ khóa » Html Button Properties Style