Weird border weight when adding button inside h tag

Question

I'm adding a button inside a h element, the button styles is for a border of 1px solid, which works fine everywhere else, but when I add this inside a h tag the border gets a weird weight so it doesn't look like 1px anymore

I noticed this is because of the transform property in h2, how can achieve both the transform and the border of 1px properly?

h2 {
  margin: 32px 32px 64px;
  -webkit-transform: translateY(30%);
  transform: translateY(30%)
}

.c-btn {
  display: inline-block;
  padding: 8px 16px;
  cursor: pointer;
  transition: 500ms;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  outline: none;
  line-height: inherit;
  background-color: transparent;
  border: 1px solid black;
  color: black;
  font-size: 18px;
  letter-spacing: 2px;
 }

<h2 id="title-1">This is the title<button class="c-btn"><use xlink:href="#"></use>WATCH VIDEO</button></h2>

Here is a JSfiddle for reference

the border is 1px only, what is the issue exactly if you want to remove translate for H2 then do `h2{-webkit-transform: translateY(0);transform: translateY(0);}` the translate wont happen. — Naren Murali, Aug 23 '17 at 20:00
I need the translate, and yes, the border is 1px, if you run the code snippet you will see the button does have a border heavier than 1px, if I remove the translate that won't happen, but I need to do the transform... — John R, Aug 23 '17 at 20:04
After putting the code in jsfiddle, one button inside H1 and one outside, I do see the kind of blurred border on the button inside H1. https://jsfiddle.net/fp2xf37v/ Not sure though what is causing it. — Nawed Khan, Aug 23 '17 at 20:06

score 1 · Answer 1 · answered Aug 23 '17 at 20:16

Try this.

h2 {
  margin: 32px 32px 64px;
  -webkit-transform: translateY(30%) translateX(0%);
  transform: translateY(30%) translateX(0%);
}

.c-btn {
  display: inline-block;
  padding: 8px 16px;
  cursor: pointer;
  transition: 500ms;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  outline: none;
  line-height: inherit;
  background-color: transparent;
  border: 1px solid black;
  color: black;
  font-size: 18px;
  letter-spacing: 2px;
 }

<h2 id="title-1">This is the title<button class="c-btn"><use xlink:href="#"></use>WATCH VIDEO</button></h2>

thanks, in safari if I run this code sniper I still get the border behaviour — John R, Aug 23 '17 at 20:25

score 1 · Answer 2 · answered Aug 23 '17 at 21:06

1

Thanks, I found a solution here: enter link description here

See the perspective (1px) piece on the update of 2014

answered Aug 23 '17 at 21:06

John R

247
1
4
15

score 0 · Answer 3 · answered Aug 23 '17 at 20:20

This seems like a bug in chrome, the simplest way to fix this is to add the transform's translate function with decimal value of .1% like shown below. Please checkout references for more details on this issue

/* Fixing CSS for h2 blurry borders*/
h2 {
  margin: 32px 32px 64px;
  -webkit-transform: translateY(31.1%);
  transform: translateY(31.1%)
}
/* Original CSS for h2 */
h2#title-2 {
  margin: 32px 32px 64px;
  -webkit-transform: translateY(30%);
  transform: translateY(30%)
}

.c-btn {
  display: inline-block;
  padding: 8px 16px;
  cursor: pointer;
  transition: 500ms;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  outline: none;
  line-height: inherit;
  background-color: transparent;
  border: 1px solid black;
  color: black;
  font-size: 18px;
  letter-spacing: 2px;
 }

<!-- without issue -->
<h2 id="title-1">This is the title<button class="c-btn"><use xlink:href="#"></use>WATCH VIDEO</button></h2>
<!-- with issue -->
<h2 id="title-2">This is the title<button class="c-btn"><use xlink:href="#"></use>WATCH VIDEO</button></h2>

<button class="c-btn"><use xlink:href="#"></use>WATCH VIDEO</button>

References:

CSS3 Transform Blurry Borders

thanks, if I run this in safari both options show the border weird behaviour — John R, Aug 23 '17 at 20:26
@JohnR Another alternative will be to give the h2 as `.h2{ padding: 2px;padding:2px; -webkit-transform: translateY(30%); transform: translateY(30%);}` This too seems to fix the issue, also you can change the values of padding and the blur goes away, sorry I dont have Safari to test and confirm this. — Naren Murali, Aug 23 '17 at 20:46

Weird border weight when adding button inside h tag

3 Answers3