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!

custom button HTML
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.

Contact Us

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.

Code Vertical Icon
From web design, WordPress, tutorials, and web developement, we have you covered.
Web Design
Website by

This is an Elementor Popup triggered by Text.

built with love using elementor pro

Code Vertical Icon

Customizing the Elementor Popup Close Button

linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram