Bootstrap link button and button not the same width. How to fix?

Question

I added width property to bootstrap buttons. However, it did not make <a class="btn" /> the same width as <button class="btn" />. Here's the jsFiddle.

This is in Chrome.

Solution

Resetting the left and right padding to zero helps but leaves the link button 2px wider.

This is because chrome's user agent applies box-sizing: border-box to button elements which means the padding will be included in the width and not in addition to it.

Setting box-sizing: content-box in your class fixes this 2px difference as well.

See demo.