CODEWITHSUNDEEP
htmlcssinputhref
sethvargo
sethvargo

Reputation: 26997

CSS style submit like href tag

I have a button class that I wrote in CSS. It essentially displays block, adds some styles, etc. Whenever I add the class to a tags, it works fine - the a tag spans the entire width of its container like display:block should do... However, when I add the button class to an input button, Chrome, Safari, and Firefox all add a margin-right: 3px...

I've used the DOM inspector in both Chrome and Safari and NO WHERE should it be adding a extra 3px padding.

I tried adding margin: 0 !important; and/or margin-right: 0 !important to my button class in my CSS, but the browser STILL renders a 3px right margin!

Is this a known issue, and is there a CSS-based solution (i.e. not jQuery/javascript)

CODE FOLLOWS:

.button {
  position: relative;
  display: block;
  margin: 0;
  border: 1px solid #369;
  color: #fff;
  font-weight: bold;
  padding: 11px 20px;
  line-height: 18px;
  text-align: center;
  text-transform: uppercase;
  cursor: hand;
  cursor: pointer;
}

Upvotes: 0

Views: 1084

Answers (2)

Gary Ryan
Gary Ryan

Reputation: 754

if you add

width:100%;

to your existing code.It will fill the container and get rid of the random 3px right-margin.

Upvotes: 0

Jim
Jim

Reputation: 73936

Yes, the <input> element has a number of oddities. Where possible, use the <button> element instead, that's a lot more reliable.

Upvotes: 1

Related Questions