Reputation: 3625
I have form submit buttons that are styled with some css. At the moment I used only submit buttons on the site but for some pages it is better to just use a link. Now I'm trying to change that, but I'm not quitting getting the exact result that I'd like to have. They keep expanding (width:100%;) untill they reach the container, but the link gets out of the container and I dont know why.
Why is the link, not growing untill it reaches the container like the button? I'd prefer to keep using the same class for both the button as the link, but if that isn't possible I'll use different owns.
I've made a quick fiddle
Assume the divs are my container
<div>
<input type="submit" value="submitBtn" class="btn">
</div>
<div>
<a href="#" class="btn">link</a>
</div>
The css
.btn {
background-color:#EE3399;
border:3px solid #A10055;
display:inline-block;
color:#26328c;
font-family:Verdana;
font-size:20px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
cursor: pointer;
width: 100%;
text-align:center;
}
div{
width:750px;
background:green;
margin-bottom:1em;
}
Upvotes: 0
Views: 424
Reputation: 314
This comes from the fact that width: 100%;
is just based just on content, not padding or borders. Since you have both, the padding and borders extend too far.
CSS3 box-sizing: border-box;
will fix your problem. It is wise to use vender-specifc tags...
http://css-tricks.com/box-sizing/
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
Upvotes: 3
Reputation: 3888
If you want a quick, easy fix try adding box-sizing: border-box;
to your css for the anchor tags.
Most elements have some default styles applied to them either by the specifications or the browser. The input[type="submit"]
element is given this by default, whereas <a>
is not.
Upvotes: 2