I'm encountering an issue with a CSS-styled button that appears distorted and displayed oddly across multiple lines when it is set as a link. However, if I change the button to an input element, it looks flawless. How can I ensure my link button displays the same as the input button?
For reference, please see this example:
https://jsfiddle.net/tasenudr/
Here's the HTML code snippet:
<div style="width: 200px;">
<table style="width:80%;">
<tr>
<td style=" text-align: left; vertical-align: middle;">
<BR> <a class="btn" target="_parent" href="index.php?ts=fq">Daily
Starting from:
$15.22</a>
</td>
<td style=" width: 4%; text-align: left; vertical-align: middle; text-align:right;">
<BR>
<input type="submit" value="6 Month Plans Starting from: $75.36" style="width:90px; top:50px; height:115px; white-space: normal;" class="btn">
</submit>
</td>
</tr>
</table>
</div>
And here is the corresponding CSS code:
.btn {
background: #FFCC02;
border: none;
padding: 10px 25px 10px 25px;
color: #585858;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
text-shadow: 1px 1px 1px #FFE477;
font-weight: bold;
box-shadow: 1px 1px 1px #3D3D3D;
-webkit-box-shadow:1px 1px 1px #3D3D3D;
-moz-box-shadow:1px 1px 1px #3D3D3D;
}
.btn:hover {
color: #333;
background-color: #EBEBEB;
}
The button on the left appears distorted, while the one on the right maintains its perfect appearance.