Style your website buttons with advanced styling.
You can style the Button element in your projects in many different ways.
In this lesson, we'll cover four examples of advanced styling:
If you have multiple buttons occupying the same horizontal space they will appear pressed up against each other. You can add margin to both sides to create space between them. Holding the Alt key while dragging the margin arrows will increase margin on both sides of the button.
However, if other instances of this button are aligned to one side, like the left side for example, adding margin on both sides of the button will push them away from the left side alignment.
To counteract this you can take the following steps:
This will ensure the left aligned buttons are even along the left side. If there are instances of the same buttons that are centered the negative margin will not affect them.
You can create a transparent background on buttons and make it stand out in other ways. For example, you can add a solid color border.
The background color by default is blue. You can edit the background color, opacity, and borders to look however you’d like. Here's how to create a button with transparent background and a border:
By default there is no hover styling on a button. If we go over to States and select the Hover state, we can set a completely different background color. For example we can even change the opacity of the background color.
You can set any other styles on hover like moving the button up by adding a transform - move.
It’s common to add shadows when interacting with buttons. Box shadow styles provide a good range of control for these shadow effects.
Learn more: Using box shadows
Something went wrong while submitting the form. Please contact firstname.lastname@example.org