Button styles

Buttons are an excellent way to catch the site visitor's attention and make him do things you want. With the button styles in Oidom, you can update the appearance of the buttons and also easily make sure that all the buttons on your website look consistent.

Choosing a style for your button

The button style can be selected from the drop-down menu ("Style") on the left sidebar while the button edit is active.

Via the link below the drop-down menu "Edit style", you can edit the selected button style. Please note, that if you make changes to a button style, the settings will be updated for all those buttons assigned with that style.

Through the same drop-down menu, you can also add a completely new style ("Create a new style"). After the addition, you can use the new style also on the other buttons of your site.


Button style settings

At the top of the button style edit view, you can see an up-to-date preview of the style. From the field below the preview, you can edit the name of the button style. If you want, you can delete the unnecessary button style by clicking the trash can icon in the upper right corner of the sidebar.

By default, the button style uses the theme settings, but you can modify them by enabling the setting(s) you want to change.

You can set the background color and text settings for the button style. However, the selection of the font family for the button style takes place in the theme settings, and it cannot be changed per button style.

With the border option, you can add a border to the button and define its color and thickness. If you want to add some radius to your button, it can be done using the radius setting which can be found under the border option. You can use the radius setting even if you don't want to have a visible border on the button. In that case, reset the ”size" setting.

By enabling the button padding, you can adjust the empty space inside the button. For example, if it seems that the text on the button is too high or too low, try adjusting the padding.

From the hover style, you can set how the button looks when the user hovers over it.

You can also add a drop shadow to the button. It can make it stand out better in situations where the button background color and section background color are alike.