How To Add A Button To Text Fields

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!

• 1
  The HTML
  You might think we will be using the Button tag, however we aren't. We will be using the A tag and assigning a class. The reason for this, is to allow us to assign a link and some styling to make it a button.

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.

• 2
  The CSS
  This is where all the fun happens. With some CSS you can easily style the simple text link into a pretty new button.

.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.

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on email

Get Your Inspect On

Blog Post