CODEWITHSUNDEEP
htmlcss
Sylar
Sylar

Reputation: 12092

Pin button to left while transformed

Im trying to create this <a> element that pins left of the screen. Its position is absolute but I cannot get it as in image:

enter image description here

HTML:

<a class="feedback__btn">Feedback</a>

CSS:

.feedback__btn {
  position: absolute;
  top: 11.5%;
  left: 0;
  background: green;
  width: 150px;
  height: 45px;
  color: red;
  z-index: 9;
  display: inline-block;
  transform: rotate(270deg);
  font-size: 24px;
  font-weight: 900;
  text-align: center;
  line-height: 45px;
  border-radius: 0px 0px 4px 4px;
}

Two things that cause the tag from not pinning to the left: transform and the width/height. How to to get it pinned to either sides of screen (left in this case) with the same transformation?

Upvotes: 2

Views: 666

Answers (1)

razemauze
razemauze

Reputation: 2676

If you move the center-point of the button, with transform:translateX(-50%) you will have a much easier way to figure out how much you need to move the button to place it correctly:

.feedback__btn {
  position: fixed;
  top: 11.5%;
  left: 23px;
  background: green;
  width: 150px;
  height: 46px;
  color: red;
  z-index: 9;
  display: inline-block;
  transform: translateX(-50%) rotate(270deg);
  font-size: 24px;
  font-weight: 900;
  text-align: center;
  line-height: 45px;
  border-radius: 0px 0px 4px 4px;
}

I have added transform: translateX(-50%) rotate(270deg); and left: 23px; to your code and changed the heigh of the button to an even number, as that is easier to halve (half of 46 is 23, while half of 45 is 22.5, and you can't have half pixels).

I have also changed the position to fixed, so it follows the user down the site when scrolling.

Upvotes: 1

Related Questions