создать кнопку призыва к действию, которая расширяется при наведении мыши

Question

Я хочу воспроизвести кнопки типа те

так что я нашел этот код

 @import "https://fonts.googleapis.com/css? 
 family=Didact+Gothic&subset=greek";
 @import "https://cdn.linearicons.com/free/1.0.0/icon-font.min.css";
 body {
 font-family: 'Didact Gothic', sans-serif;
 letter-spacing: 1px;
 font-weight: bold;
     }
 .side-menu {
 display: flex;
 flex-wrap: wrap;
 max-width: 300px;
 position: fixed;
 right: 0;
 top: 50%;
 -webkit-transform: translateY(-50%);
 transform: translateY(-50%);
  }
 .side-menu > * + * {
 margin-top: 0.5em;
  }
 .btn {
 display: flex;
 color: #fff;
 flex: 100%;
 transition: -webkit-transform 0.2s ease-out;
 transition: transform 0.2s ease-out;
 transition: transform 0.2s ease-out, -webkit-transform 0.2s ease-out;
 -webkit-transform: translateX(236px);
 transform: translateX(236px);
 text-decoration: none;
  }
 .btn:hover {
 -webkit-transform: translateX(0px);
 transform: translateX(0px);
  }
 .btn__icon {
 flex: 0 0 32px;
 padding: 1rem;
 font-size: 2em;
 background-color: #ff6347;
  }
 .btn__text {
 flex: 0 0 100%;
 display: flex;
 align-items: center;
 padding: 1rem;
 background-color: #ff927e;
  }

, который создает те же кнопки. Единственная проблема в том, что когда я пытаюсь воссоздать их в своем заголовочном файле CSS, я получаю правильную функциональность, но не положение и расположение (цвет и т. Д.). Я копирую первую часть в и Я вызываю его в заголовке второй командой.

  <a href="#" class="btn" > <button> register </button></a>

возможно, это что-то глупое, что я шучу, но я только сейчас начинаю с CSS ..

Answer 1

Я не могу точно понять проблему, и я не реализовал все ваши стили, но это главная идея

  <div class="button-wrapper">
    <div>Button</div>
    <div>Button</div>
    <div>Button</div>
  </div>


.button-wrapper {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%)
}
.button-wrapper > div {
  background : orange;
  padding: .4rem;
  margin-bottom: 5px;
  transform: translateX(50%);
  transition: transform 0.2s ease-out;
}

.button-wrapper > div:hover {
  transform: translate(0%)
}