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.
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;
}
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.
If you like this tutorial, please share it.
Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on email
Blog Post