Discuss

Styling Bootstrap 4 Buttons

On this page

Sometimes the available Bootstrap 4 button styles may not suit your page design, so you need to customize them. That can easily be done using the Design panel in Wappler.

We created our page layout and we need to add a button. Click the Insert icon on your page:

Screenshot_24|690x385

Select Button:

Screenshot_25|690x385

We leave the button style to 'Default' and switch to Design Panel:

Screenshot_26|690x385

We want to change the background color, color and border radius of the button.

First, scroll down the Design Panel to the Background section. Click the color picker to select a background color:

Screenshot_27|690x385

We select a nice pink color for the background:

Screenshot_28|690x385

Then let's select the button text color:

Screenshot_29|690x385

We set this it to white:

Screenshot_30|690x385

Then scroll down to the border radius tools:

Screenshot_31|690x385

Drag the inner handle, as it controls all the borders radius values simultaneously. We drag it to 0px:

Screenshot_32|690x385

We have our button styles set up, now let's customize the styles for when we hover it. Scroll up and at the top of Design Panel select the hover state:

Screenshot_33|690x385

Now we are designing for when the button is hovered. We want to change the text color and background color:

Screenshot_34|690x385

Select the colors you want to use on hover and save your page:

Screenshot_35|690x385

Here's the result - the default style of this button has been changed to our own style:

ezgif-1-765272616344|680x196