Claasic Feature Box button

Support
#1

Hello,
Is it possible to have a simple button display instead of the link text? I tried using button shortcode but no joy.
Thank you

#2

Hi Derp,

Thank you for writing in, please add this to Page > CSS, to the page where you have the Feature Box.

.x-feature-box a.x-feature-box-text {
	background-color: tomato;
	color: #fff;
	border: 1px solid #ccc;
	border-radius: 5px;
	padding: 0.5em 1.5em; 
}

Hope it helps,
Cheers!

#3

Hi Derp,

I tried to access the URLs you have provided but they redirect to Google. Have you setup some redirection on the site?

Kindly disable it so that we can check.

Thank you.

#4

fixed. Please try again thank you

#5

Hi Derp,

I have changed the above provided CSS rule as follows.

.x-feature-box .x-feature-box-text a{
	background-color: tomato;
	color: #fff;
	border: 1px solid #ccc;
	border-radius: 5px;
	padding: 0.5em 1.5em; 
}

Now you should see the buttons instead of links.

If you don’t see the changes, please make sure to clear all cache before testing. Refer to the following resource if needed (https://www.wpbeginner.com/beginners-guide/how-to-clear-your-cache-in-wordpress/).

Thanks!

#6

Thank you that works! In your image I noticed it has a gap between the lettering and the link Go. I do not see that. I tried adding margin: but it only shifted left or right not adding a space at top. Any suggestions? Thanks

#7

Hi Derp,

I have updated your CSS as follows to make further improvements.

.x-feature-box .x-feature-box-text a {
    background-color: tomato;
    color: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 0.5em 2.0em;
    display: block;
    width: 50%;
    margin: 15px auto;
}

Hope that helps.

#8

Thank you! That did it.

#9

You are most welcome. :slight_smile:

#10

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.