CODEWITHSUNDEEP
htmlcss
Engkus Kusnadi
Engkus Kusnadi

Reputation: 2506

Why my anchor have different style with my submit button?

I created a submit button and anchor link with same class name, with same style. But the result is different. My anchor link is bigger than my submit button. Like this

enter image description here

Here's the snippet

.btn {
    display: inline-block;
    background: red;
    margin:10px;
    padding: 13px 30px;
    border:none;
    border-radius: 4px !important;
    box-shadow: 0 4px 0 0 blue;
    
    color: #fff;
    font-size: 18px;
    text-transform: uppercase;
}
<input type="submit" value="Login" class="btn">
<a href="" class="btn">Login</a>

How to make it have same size? without set the height to exactly px or set the line height of the element. Thanks in advance

on the jsfiddle or sippet have same style, but when I create and run on local browser it's say different thing

Upvotes: 1

Views: 47

Answers (1)

bigblind
bigblind

Reputation: 12867

Setting a line-height in the .btn class makes them equally tall. 

.btn {
    line-height: 1em;
    display: inline-block;
    background: red;
    margin:10px;
    padding: 13px 30px;
    border:none;
    border-radius: 4px !important;
    box-shadow: 0 4px 0 0 blue;
    
    color: #fff;
    font-size: 18px;
    text-transform: uppercase;
}
<input type="submit" value="Login" class="btn">
<a href="" class="btn">Login</a>

Upvotes: 2

Related Questions