html - 创建在鼠标悬停时展开的号召性用语按钮

Question

我想复制类似 those 的按钮

所以我找到了这段代码

 @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%)
}