Advanced Button Styling

 

Lesson info

In this video, we'll explore four examples of more advanced button styling techniques to help you achieve just the look you're looking for. We'll cover:

  1. ‍Aligning multiple buttons
  2. ‍Applying transparent backgrounds to buttons
  3. ‍Using the hover state and transitions on buttons
  4. ‍Adding box shadows to buttons to make them stand out

Assets

Want to follow along with this lesson? Fortunately, we created a zip file which contains all the assets used in the project, and we've included that link 

right here
.

Transcript

For Advanced Button Styling, we’re going to cover five different aspects: Button Alignment, Transparent Backgrounds, Hover Controls, Button Transitions, and Box Shadows.

We’ll start with Alignment.

And as we know, when it comes to buttons that are pressed up against each other, adding margin to both sides creates breathing room. But this gets a little messy if we have sections that alternate alignment and justification.

Whether we're using flexbox or text alignment, or any combination of layout values, adding margin to both sides is always going to push off of things that are aligned to one side.

And what we'll do is go to the Elements Panel and drag in a div block. And from there, we can move each of our existing buttons inside. And with our div block selected, we can name the class so we can style it and reuse it later.

In our left-aligned section, we'll go in and delete each of our old buttons. Then we can simply hold option or alt and drag our button block (which contains our buttons) right into the bottom section.

Since the Button Block class is applied to both of these div blocks, we can simply go in and create a negative margin. And since we set the margin to 8px on both sides of our buttons, we'll set the button block to -8px on each side.

And two things: (1) the alignment on the centered buttons isn't visually affected and (2) the buttons on the bottom are aligned perfectly.

What if we select one of our buttons and increase the margin — let's say to 20px? That's fine. Select the button block and adjust the margin to match: -20px.

That's alignment. Let's do transparent backgrounds.

The size of the visible background, by default, is controlled by the text and our padding. We can add or remove padding to change that default size. But what we want to do here, is make a number of fairly standard changes and animate those.

We're starting with the background color. By controlling the opacity, we can drop all the way down to create a fully transparent background. When we add a border? And we set the color to white here so we have contrast? We can more clearly define that boundary.

And of course, setting a huge radius like 500px gives us the capsule or pill shape. Or, if we want only a gentle, subtle rounding, we can set it to something like 5px.

Now like any design, we're not stuck with our existing values. Maybe we realize we want a bit more contrast, now that the border is there. We just go into background color? And play with the opacity a little bit until it looks right. And we can see that change right on the Canvas.

Now let's talk hover.

Now, on hover, right now we get nothing whatsoever. It looks exactly the same. If we go over to States and select the Hover state, we can set a completely different background color — bring up the opacity to full. And of course, now our white text against the white background is going to be a major issue for legibility, so we can set our font color, too.

On hover, we can see the change on the Canvas. With a lot of hovers, sometimes the Designer's element edges can get a bit distracting. We can turn those off right here. We can still select elements on the page, but hovering will let us preview the effect without showing the element edges.

What about movement? In our Hover state, we can go down to Transforms, and move the element in any direction. X of course moves left and right; Y moves us up and down. Let's choose something subtle here: -3px. And now on hover, our buttons appear to move up 3px.

Let's smooth this out.

Because this is all a bit abrupt. With any of our buttons selected, we can go over and add transitions for each value we've set on hover. We'll add one for Background Color. But if we stop here, it's apparent that the background color smoothly fades, but everything else cuts abruptly.

Let's add a second transition, this time going down to Font Color. And lastly, we can go in and set one more transition — this time choosing Transform. Now 3px over 200ms looks fine, but we can extend that if we want — something like 1000ms (or 1 second). Let's close out.

And on hover, the transform effect smoothly transitions over a full second.

And none of this is fixed as-is. At this point, we can go in and really start tweaking the appearance of our buttons. Affecting the padding, the typography values from all caps to font size and font spacing.

And we can go back in and see how the transition looks if we change the opacity (make our background even a little bit darker).

And when we hover over our buttons on the Canvas, it looks pretty good. But we can see that there's yet another opportunity to add contrast: and that's a box shadow.

If we use the Drop Shadow preset, we have a good starting point and access to all our box shadow controls. Like blur...distance (let's do 5px). And we can play with the angle until it's right — let's choose straight down. And of course we can make adjustments to the opacity on the shadow.

And what happens on hover? Let's go to the Hover state. And since we set a transform earlier to move up 3px on hover, let's add three pixels of distance to that shadow to give it a lift. And we can increase the opacity of our shadow color to make it a bit more dramatic.

Close out, and head on over to preview, and we see our drop shadow in action. Since we've yet to add a transition for the Box Shadow, the shadow cuts abruptly on hover. We can go back over to transition and add one...of course we select the Box Shadow for our transition. Over in Preview, we can see the box shadow is smoothly fading on hover.

So, if we're looking to align buttons in different environments, we can use a div block to wrap them, creating negative margin to offset the margin on buttons. We can adjust the opacity on our button backgrounds to create transparency. We can make a number of style adjustments in the Hover state. We can add transitions for each value we want to smooth out. And we can add shadows. Adding lift and dimension to our buttons.