user3304104 user3304104 - 19 days ago 8
CSS Question

Plain Button With Padding

The following CSS apparently results in the following Button. As you can see there is a weird gray plain button within the white padding. How do I fix this?

How do I make the gray go away?

.button_style {
background-color: white;
color: white;
padding: 15px 15px;
text-align: center;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
}


enter image description here

NOTE: The green space is the background, the white space and gray space are both clickable button.

Answer

This is what I had previously, which was giving me the plain gray button:

<p><span class="button_style"><a href="example.com">Website</a></span> </p>

I changed it to the following, which resolved my problem:

<input class="button_style" type="button" onclick="location.href = 'http://www.botequotes.com';" value="Visit Site" />

NOTE: JavaScript must be enabled in order to use 'onclick="location.href'

Comments