Insert Buttons in Text

Beaver Builder
1

Hi BB community.

I know how to create and style buttons as BB modules. And I can insert them into any row or column - either stacked or side-by-side in responsive rows.

But is it possible (w/o coding skills) to add a button within text.

I would like to create something like the following….

“If you’d like to learn more, [Sign Up Today].”

or

“Create a [Free Account] to see how product X works.”

Ideally, I’d be able to style the button (colors, borders, gradients, etc) - and make it responsive so the button’s font size matches the surrounding text on any screen.

I tried using shortcode, but this created a new module area stacked below the text.

Any ideas?

Cheers,

2

Simply add a class to your link and style it with CSS.

HTML

<a href="https://www.mysite.com" class="my-button">My link text</a>

CSS

.my-button {
    here the declarations
}
3

hi avanti. thanks for the tip.

are there any native controls w/i BB to do this - ones that require zero coding skills? i don’t know CSS or HTML yet.

4

No there’s not for that kind of inline button, custom coding is the only way, but not that difficult.

5

sounds good. i started playing around with css yesterday. agreed - not so bad.

thanks again for your help.

6

Nice, you’re on your way and will certainly learn things that will be useful in any situation later.
Just a few CSS possibilities for an inline “button”:

.my-button {
    display: inline-block;
    background-color: red;
    padding: .25em .5em;
    font-size: bold;
    text-decoration: none;
    transition: all .3s;
}
.my-button:hover {
    background-color: black;
}
7

those effects are pretty nice. i’ll play around with them fo’sho.

here’s what i have so far (the orange button “Free Account”).

more coding to do.

cheers man.

8

Glad you took the DIY way. :grin: