Button is one of the default widgets that Elementor offers. You can use the widget for a wide range of purposes. From creating a call-to-action section on a page to creating a full-screen menu by combining it with Elementor Popup Builder. There are two elements you can add to a button: text and icon. By default, the two elements are placed in an inline style (horizontal). On a certain case, you might want to add a line break to the button text. Like the ones below.
Adding a line break to a button text is actually extremely easy. You can simply add the <br>Available on<br>App Store
You can add the text above to the Text field on the button settings panel.
However, if you add the break line that way, you will have no control over the individual texts of the button. The setting you make on a text — be it the top text or the bottom text — will also be applied to another text. To apply different settings on each text, you need to use custom CSS.
Adding Line Break in the Elementor Button
First, add the Button widget to the canvas area just like usual. Next, add the following text to the Text field.
<span class="top-small-text">Available on the</span> <br> Google Play
You can tailor the button texts with your own texts.
Next, go to the Advanced tab on the settings panel and open the Custom CSS fblock and paste the following CSS snippet.
The snippet
selector .elementor-button-icon{
font-size: 58px;
}
selector .top-small-text{
font-size: 16px;
color: #ffffff;
}
You can replace the value of the font-size variable on the elementor-button-icon selector to change the icon size. To change the size of the top text, you can change the value of the font-size variable on the top-small-text selector.
To set the size of the bottom text, you can go to the Style tab on the button settings panel and click the pencil icon on the Typography setting option.
You can stay on the Style tab to set the background color of the button, set hover effect, and other styling settings you want.
