How can I prevent my button from being mangled?


Tags: html,css

Problem :

I have a css styled button that is being completely mangled and showing strangely on multiple lines. However if the button is set as a input instead of a link the button looks perfect. How can I get my link button to look the same as the input button?

Here is an example:

https://jsfiddle.net/tasenudr/

html:

<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&#x00A;Starting from:&#x00A;$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>

CSS:

.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 is mangled, but the button on the right looks perfect.



Solution :

A button is an inline element.

Give it a display: block; or display: inline-block;


    CSS Howto..

    How to make the textbox above the slider

    CSS How to set div height 100% minus nPx

    How do I simultaneously open child and sub-child of a parent, in jQuery accordion menu, when parent is clicked?

    How do i make part of a CSS background fit perfectly to a browser

    How to put four images 2x2 on other image as background, CSS?

    How to build a complex table by using CSS?

    How to overlay shadow with bootstrap?

    How compatible is the new Microsoft edge browser? [closed]

    How to call image on css?

    How to make bootstrap css input add-on button and error span look good

    In what circumstances is flex-shrink applied to flex elements and how does it work?

    How to get conditional css to work on Blogger/Blogspot?

    How to apply two CSS classes to a single div/span

    CSS: How to make background of an element stretch across the entire page?

    How to target CSS link with JavaScript

    How to show one element when click on the another element with css?

    How can I position a form with controls over a Google Map?

    How to make Flexbox span multiple lines?

    How can I make a border wrap around a group of pictures?

    How to center variable length submit buttons?

    How to place the block on the top of “second” screen using CSS?

    How To Create SubMenu in Drop Down (HTML/CSS)

    How to create rounded shapes with css or SVG

    How to add media attribute to ASP.NET MVC4 style bundle

    SASS: How to exclude part of selector

    Show submit button as an image

    CSS column-count and Chrome bug: how to avoid overflow content being cropped

    How to get Style From jQuery in angular2

    how would i get the headline to fade in and move up very slightly on page load with css

    How to add CSS to an if else statement in PHP