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.

tag and Anchor tag are two different html elements which comes with default html behavior in terms of margin and padding. According to your css class you are assigning same class to both elements. In button tag, when we assign the width and height then text will come into center which is a default behavior of button tag. In Anchor tag, you can see the underline also which is also the behavior of anchor tag.