Помощь с преобразованием кнопки

Question

Моя кнопка на 2 картинке. Мне нужно чтобы кнопка выглядела как на 1 картинке. Как мне это сделать?

.question__btn {
    color: $purple ;
    font-weight: 300;
    font-size: 63px;
    cursor: pointer;
    background: transparent;
    border: none;
  }
  
.question__btn--active {
    transform: rotate(-45deg);
    color: $white;
    background: $purple;
    width: 60px;
    height: 60px;
    border-radius: 50%;
  }

<button class="question__btn">+</button>

Answer 1

У Вас размер в неактивном состоянии отличается от активного. Тем самым при вращении теряется центрирование.

Если использование button не принципиально, то можно использовать следующий вариант: text-align и line-height

.question__btn {
  color: purple;
  font-weight: 300;
  font-size: 63px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  line-height: 52px;
  text-align: center;
}

.question__btn:hover {
  cursor: pointer;
  transform: rotate(-45deg);
  color: white;
  background: purple;
}

<div class="question__btn">+</div>

БЛОГ НА HUSL

Помощь с преобразованием кнопки

Ответы (1 шт):