How To Add A Button To Text Fields

Sometimes you just need to add a button or two or three in the text field of your widget, module...etc. We're going to show you how to easily do this in most text fields. We say most, because the text field has to accept HTML. Most widgets, modules, etc by most page builders (Elementor, Divi, Beaver Builder, WP Bakery..and so) allow HTML.

Just want the code? No problem, we've got a plain text file with all of it for you at the bottom of this post.

Let's Get Started!

Before any CSS it will look like this: Contact Us If you look closer, you'll see the class "my-custom-button" has been assigned to this tag. This will allow us to add the stying.

.my-custom-button {

display: inline-block;
margin: 5px;
background: #ffd300;
color: #1a2d59;
font-size: 16px;
border-radius: 10px;
padding: 8px 16px;
-moz-transition: all 0.2s;
-webkit-transition: all 0.2s;
transition: all 0.2s;
}

.my-custom-button:hover {

background: #666;
color: #ffd300;
}

Final Result

Here's a live demo of what it will look like after you've added the CSS. Go ahead and hover over it and/or click on it.

You can tweak any of the colors, padding, etc that you need to suit your branding/style. Yep, it's just that simple to add a button anywhere.

Click here to download the code snippets

If you like this tutorial, please share it.