Button with subtitle

  • 2 October 2018
  • 3 replies
  • 171 views
john_p

Is this possible?

Button with subtitle text

I’m trying to create a button that has some extra subtitle text below the main text. See screenshot for an example.

For my first attempt, I simply added some paragraph text below the button text. The issue with this is that there was too much padding at the top half of the button - making the button look weird.

For my second attempt, I just used the box feature and turned my text into an actual link. [see screenshot] The issue with this is that if someone clicks anywhere on the button outside of the hyperlink, then the button won’t work. Not ideal if going for conversions.

Any ideas about how to do this with a normal button?

29%20PM

3 replies

Zoe_Tattersall
Userlevel 6
Badge +3

Hey @john_p 🙂 Easiest way I can see is to adjust the padding and text line-height via some CSS.

Make the button height on the page LESS the extra padding. You’ll have to adjust the padding/line-height to suit your button and use the preview to get the subheading text positioned in the right spot.

Here’s an example: https://sevahcreative.com/unbounce/button-subtext/

CSS I used:

<style>
  #lp-pom-button-9 {
    padding-bottom: 30px;
    line-height:6px;
  }
</style>
We’re more than just your type. We do awesome, too. And website design, graphics, product photography, video content & more. https://sevahcreative.com
Finge
Userlevel 6
Badge +4

Sweet! Love your example 😉

Finge
john_p

Wow awesome! Thank you @Zoe_Tattersall!!!

Reply


Terms & ConditionsCookie settings