Beautify HTML buttons with CSS and Bootstrap

How to create HTML buttons?

In web pages, the buttons are generally used in forms to submit data.

The HTML buttons are also used as separate elements e.g. for navigation (next, previous) etc. in web sites.

The button can be created by using two ways in HTML:

By using button tag

This is how you may create a simple button by using the <button> tag:

By using input tag

You can create buttons for the HTML forms by using the <input> tag and specify the type, for example:

 

Also:

 

Styling HTML buttons

The scope of this tutorial is not to explain how to create buttons and where to use it. In this tutorial, I will show you styling the buttons by using latest Bootstrap framework that uses CSS. Also, I will show you demos of creating and styling buttons by CSS properties.

Creating buttons of HTML with custom CSS

In the following example, the <button> tag is used to create a button and a CSS class is given which is placed at the <style> section under the <head> tag.

See the demo online:

CSS button

See online demo and code

The following CSS class is used in button:

 

Adding hover effect on the CSS button

In above example, the buttons remained the same as the mouse is over any button. You may add hover effect and use different CSS properties to show users some effects.

See the following demo:

CSS button hover

See online demo and code

By using the :hover selector with button class, the background-color and text color are changed.

 

You can see, the button used different CSS and CSS 3 properties including border-radius.

Adding effects in the HTML buttons by CSS

Use the CSS transition property to add some effect on the button, as the mouse is brought over. See the following demo with code:

CSS button transition

See online demo and code

The following CSS code is used for transition:

 

An HTML submit button example with CSS

In this example, a button is created by using the <input> tag and specifying the type=”submit”. The submit and reset buttons are used in HTML forms. As you click the submit button, the information in the HTML form is submitted to the server.

As for as styling the submit or reset buttons, there is no difference. You simply need to refer the CSS class/id just as in the case of <button> tag.

See this example online where “Submit” and “reset” buttons are created with CSS style.

HTML submit button

See online demo and code

The buttons code is:

 

An example of creating buttons by Bootstrap classes

If you have no or little idea, the Bootstrap is a web framework which is used to create websites that are mobile-friendly. It has built-in CSS classes that you can use for creating different elements including HTML buttons.

In this example, I have created different buttons by using the built-in CSS classes in Bootstrap framework. The buttons are normal sized and created by using the <button> tag:

HTML button

See online demo and code

For creating buttons by using Bootstrap, you have to include its CSS library, as I did in the demo. See the <head> section in demo page code panel.

After that, the HTML button tag is used where Bootstrap CSS classes for buttons are specified:

 

You can see, to create a normal sized button, the main btn class along with another class like btn-primary, btn-danger are specified. The other class should be used according to the context where button is used. For example, if an alert or message is shown to the user, you can use btn-info class.

For a critical action, like removing an account permanently by pressing a button, you may use a red button with btn-danger class and so on.

An example of creating large sized HTML buttons by Bootstrap

In this example, large sized buttons are created by using the btn-lg class along with two classes that are used in above example. See the demo and code by clicking the image or link below:

HTML button bootstrap

See online demo and code

You see, large sized buttons are created by using the btn-lg class:

 

Creating block level buttons in HTML with Bootstrap

Sometimes, you need as large buttons as the container holding it. For example, a <div> tag with more width than normal or large sized buttons that contains a <form>.

By using Bootstrap CSS classes, this is how you can create block level buttons:

HTML button block

See online demo and code

By using the btn-block class along with main btn and context-specific class, you can create block level buttons in HTML by using Bootstrap. This is how, HTML block level buttons are created in demo:

 

Create small buttons example

Use the .btn-sm class to create small buttons in web page. See the following demo:

HTML button small

See online demo and code

Similarly, you can create extra small buttons by using the btn-xs class.

An example of Submit button with Bootstrap based form

In this example, a form is created with a few textbox input fields. A submit button is used, “Create Account”, that uses Bootstrap built-in CSS class.

See the demo and complete code online:

HTML submit button Bootstrap

See online demo and code

The other form controls are also assigned built-in CSS classes.

Customizing HTML buttons created with Bootstrap’s CSS classes

You may also customize the colors and other properties of these buttons that retain certain other built-in properties.

In this example, the buttons are customized with CSS3 properties along with assigning a few built-in CSS classes in Bootstrap.

HTML buttons custom

See online demo and code

An example to use button event with JS code

In this example, I will show you how you can execute JavaScript code at the click event of the button. The click event occurs as a button is clicked.

HTML button onclick

See online demo and code

To execute the onclick event, choose a color from the HTML dropdown and press the button. The JS code will execute and it will apply selected color to the document.

This is how onclick event is called as button is clicked:

 

After the onclick keyword, a JS function is specified in the button tag. Similarly, you may use other events like dblclick (for double click) etc.

Using the disabled attribute in button tag demo

By using the disabled attribute in button tag, it cannot be clicked. In this example, three buttons are created. At the click event of all buttons, a JS function is called just like in above example. The function triggers an alert message.

The middle button, “Previous” is given the disabled attribute. See the demo online:

HTML button disabled

See online demo and code

A separate class for the disabled attribute is created in the CSS section that makes it look different than the active buttons:

 

This is how button tags are created:

 

See the complete code in the demo page.