CODEWITHSUNDEEP
htmlcsshyperlinksubmit
mXX
mXX

Reputation: 3625

Converting my submit button to a link and keeping the same style

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

http://jsfiddle.net/QPRFK/

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

Answers (2)

Nathan Petersen
Nathan Petersen

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

Jordan Foreman
Jordan Foreman

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

Related Questions