时间戳

首页 > 解决方案 > 创建在鼠标悬停时展开的号召性用语按钮

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

问题描述

我想重现这样的按钮

所以我找到了这段代码

 @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 开始..

标签： htmlcssbutton

解决方案

我不能完全理解这个问题，我还没有实现你所有的风格，但这是主要思想

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

推荐阅读