The purpose of web designing is to make the site impressive. No one likes navigating a dull website. Making the site user-friendly and appealing requires a lot of effort. It is also through the minor segments. However, making even smaller components with a beautifying effect is enough for the user to stay longer.
Button design is one of the principal aspects. The use of buttons is in the majority of websites. In this section, Bootstrap rev brings you the new collection of button designs for a website. The designers and the users can play with the different button styles.
btn-icon is to show the icons. Here the icons are from bootstrap. However, the designers can use the symbols of their choice.
btn class is the default button class to shape the buttons.
Get the buttons of the color chosen from the color palette during web designing. Here, these are available from the theme color of the website.
btn-theme-primary class is to make use of the primary color of the website.
btn-theme-secondary is to make use of the secondary color of the website.
To make use of the gradient color as per the color palette, use btn-theme-gradient.
<button type="button" class="btn btn-theme-primary btn-icon btn-icon-rotate-h"><i class="bi bi-person"></i> Register with us</button>
<button type="button" class="btn btn-theme-secondary btn-icon btn-icon-rotate-h"><i class="bi bi-person"></i> Register with us</button>
<button type="button" class="btn btn-theme-gradient btn-icon btn-icon-rotate-h"><i class="bi bi-person"></i> Register with us</button>
While hovering on the button, the icon will flip in the vertical direction. It shows the 3D flipping effect.
btn-icon-rotate-v is to make the icon rotate vertically.
<button type="button" class="btn btn-primary btn-icon btn-icon-rotate-v"><i class="bi bi-person"></i> Register with us</button>
During the drift on the button, the symbol will flip the even way. It shows the 3D flipping impact.
btn-icon-rotate-h class is to cause the symbol to rotate horizontally.
<button type="button" class="btn btn-primary btn-icon btn-icon-rotate-h"><i class="bi bi-person"></i> Register with us</button>
Get the live effect of the icon growing in the button. Take the cursor over the button and see the styling. Move the cursor away and see the impact of getting back to its regular.
btn-icon-scale-up class is to show the growing effect.
<button type="button" class="btn btn-primary btn-icon btn-icon-scale-up"><i class="bi bi-person"></i> Register with us</button>
Growing the icon is already shown in the above styling. In this style, get the opposite effect. Move the cursor over the button and see the icon shrinking down. Taking the cursor away will show the icon getting back to its usual shape.
btn-icon-scale-in class is to show the shrinking effect.
<button type="button" class="btn btn-primary btn-icon btn-icon-scale-in"><i class="bi bi-person"></i> Register with us</button>
Making interactive icons will get users' engagement. The styling of the button in this example is one of the most attractive designs. It is growing of the symbol and fading away once the cursor is over the button. Take the cursor away and see the reverse.
btn-icon-scale-up-hide class makes the effect for this.
<button type="button" class="btn btn-primary btn-icon btn-icon-scale-up-hide"><i class="bi bi-person"></i> Register with us</button>
Have you ever thought of changing icons in the button section? This example is bringing you the same. Hover over the button and see the symbol changing.
btn-icon-change class is to change the icons.
Here, i tags is used for the icons of bootstrap.
default is the class for Bootstrap Rev to show the icon before hovering.
done class is to show the icon after moving the cursor over the button.
<button type="button" class="btn btn-primary btn-icon btn-icon-change btn-lg">
<i class="bi bi-check2 default"></i>
<i class="bi bi-hand-thumbs-up done"></i>
<span>Register with us</span>
</button>
A classic and minimalistic button to design the website, rounded buttons are highly in use. There is no use of the icon in this design. But, if the designer wants to add icons, they can use the one as per their choice. Also, they can give the effects from the above button designs.
btn-rounded class is to round the button from the sides.
<button type="button" class="btn btn-primary btn-rounded">
<span>Register with us</span>
</button>