Adding colors to buttons
You can add a background color to buttons that not only just adds beauty to them but also conveys the purpose behind the button. In order to do so you can use any of these given classes which are, .btn, .btn-primary, .btn-success, .btn-info, .btn-secondary, .btn-warning, .btn-danger, .btn-dark, .btn-light.
How to add colors to the button using Bootstrap 5
In the example below we are going to demonstrate some of the above-mentioned classes.
The above code generates three buttons, first with a basic styling, second having a green background color and indicating a positive action and the last one having a blue background color and representing an important action. Notice that we have used the .btn class when styling each button because this gives certain padding to the button along with a basic style.
You can try other classes to see how they style the buttons.
Buttons as Links
You can also link other web pages or sources to buttons in Bootstrap 5.
How to redirect a user to another source using button
Suppose you want to redirect your users to another source using a button.
Here you can simply provide the link of the other source to the href attribute of the anchor tag. Moreover, the button created in the above code snippet will have a light blue color and basic style.
Here is how you can make buttons as links.
Apart from the anchor tags you can also use the above-mentioned button classes on inputs as well. As you know the <input> tag can render some types such as submit or reset, therefore, you can apply styling to any of these input types.
How to apply button classes on inputs
Here is how you can apply button classes on inputs.
The above will generate three types of input buttons with each button having a different background color.
In this way you can apply classes associated with buttons on various input types.
In some scenarios we wish to make enlarged buttons, meanwhile, in other cases, we want the opposite. Using the classes linked to the sizes of buttons we can achieve this task.
How to change button sizes in Bootstrap 5
Consider the example below to understand how to make buttons of various sizes.
In the above code, we are generating three buttons of small, medium, and large sizes respectively. All of the buttons have been given a certain style as well.
These are buttons of varying sizes.
You can also outline your buttons using the .btn-outline class in combination with color classes to style your buttons.
How to give outline to buttons in Bootstrap 5
Suppose you want to outline your button using bootstrap 5 then follow the code snippet below.
The above will generate a button with a green outline, furthermore, when you bring the mouse over the button a hover effect will be applied that will provide it a background color corresponding to the color class used every time the mouse is brought over it.
The button has been given an outline along with a hover effect.
Active and Disabled Buttons
To add beauty to your button you can either add states such as active or disabled on your buttons or style the states of the button.
How to make a button diabled in Bootstrap 5
Let’s generate two buttons, one with an active state and the other with a disabled state.
In the above code, the first button has a basic styling along with a light blue background and an active state, meanwhile, the second one has been disabled and has the same style as the first one. Moreover, both the buttons have white text color.
These are buttons with the active and disabled states.
For the purpose of creating buttons that take up the entire horizontal space you have to assign the .d-grid class to the div containing the button element, meanwhile, assign the .btn-block class to the button element.
How to create a block-level button using Bootstrap 5
Let’s create a block-level button.
Here we are generating a full-width button using the .d-grid class on the parent element that makes it span the whole width of the parent element.
The above output shows a block-level button.
Buttons can be styled in multiple ways using the various Bootstrap 5 classes associated with buttons. For instance, you can add colors to buttons using classes such as .btn-primary, .btn-success, .btn-info, etc. Furthermore, you can use other classes available to make buttons as links, give them a certain size, an outline, or make them block-level. This blog discusses various styles that you can provide to buttons using Bootstrap 5.