Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Same class not working properly on different element

    • 0
    • 0
    • 0
    • 5
    • 0
    • 0
    • 0
    • 1.12k
    Answer it

    Hi all,

    I have a question about class performance, i use a class on two element first is an input type button and second is an anchor tag (a) both are looking different. Why it happens can anybody have any proper answer.

    Thank you in advance.

    CSS:-

    *{margin:0;padding: 0;}
    .demo{
        height:30px;
        width: 100px;
        color:#fff;
        background: #ccc;
        border:none;
        float:left ;
        text-align: center;
        font-family: 'arial';
        font-size: 12px;
        border:1px solid #000;
    }
    

    HTML :-

     <a href="" class="demo">Hello</a>
     <button type="submit" class="demo">Hello</button>
    

    Output:-

    Hello

 5 Answer(s)

  • The rendering of a link verses a button are automatically different. For a button, the HTML in a browser already has the shape and style of a button built in, which automatically displays the button according to its default styling. This means when you want to style a button to appear like the link, you have to take into consideration that certain CSS properties have to change for the button.

    With the CSS you have used, this is what I changed:

    --CSS--

    .demo-container {
    display: table;
    }
    .demo{
    display: table-cell;      /*add this*/
    vertical-align: middle;   /*add this*/
    height:30px;
    width: 100px;
    color:#fff;
    background: #ccc;
    border:none;
    float:left ;
    text-align: center;
    font-family: 'arial';
    font-size: 12px;
    border: none;         /*changed this*/
    margin-left: 5px;    /*add this*/
    box-shadow: 1px 1px 1px #2d2d2d;    /*add this*/
    text-decoration: none;   /*add this*/
    cursor: pointer;     /*add this*/
    }
    

    --HTML--

    <div class="demo-container">
    <a href="" class="demo">Hello</a>
    <button type="submit" class="demo">Hello</button>
    </div><!--/END demo-container-->
    

    I created a container that wraps your demo elements. This is needed. The CSS for this container is above.

    What I changed in your CSS was the following:

    "display: table-cell;" - works with "display: table" in container DIV.

    "vertical-align: middle;" - make the content (text) vertically align in the middle. The "display: table" and "display: table-cell" together makes this work. (Won't work with inline-block or block).

    "border: none" - changed this, as this was making the styling for the link and button appear different. This also changes the browsers default styling for the button by cancelling it.

    "margin-left: 5px" - needed this to separate the link and button from each other. BUT since you are likely not going to use them side by side in reality, use this margin to create space between the link or button from any other elements on the page.

    "box-shadow: 1px 1px 1px #2d2d2d;" - used this to simulate the border and since this renders the same for a link as would button, it worked.

    "text-decoration: none;" -this removes the default underline for the link text. If you want to have them both underlined, then use "text-decoration: underline;"

    "cursor: pointer" - I used this to make both the link and button to show the cursor the same way. You don't have to use it if you do not want to.

  • @mtrantalainen thank you for your reply, but are you sure this css will work same on anchor tag and button because its not work for me.

    and actually I was asking why the same class is showing different behavior on elements and in your answer you are telling about, How can I render as same style :)

  • Default CSS for a and button elements are different enough that your CSS is not enough to make those look the same. You need at least following in addition to your existing styles:

    text-decoration: none;
    display: inline-block;
    vertical-align: middle;
    

    In addition, you should be aware that many browsers have additional limitations for styling the button element and some features cannot be modified, no matter how much CSS you write.

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: