html - 在CSS中扩展按钮而不需要绝对定位

Question

我正在尝试创建一个扩展的 CSS 按钮。我取得了一些进展，但除非我使用绝对定位，否则似乎无法让它发挥作用。有没有一种方法可以制作这种类型的按钮而无需将其绝对定位在页面上。谢谢你的帮助。以下是我目前所拥有的。

我希望它在不需要绝对定位在页面上的情况下工作。

.add-new-button {
  right: 250px;
  position: fixed;
  width: 40px;
  height: 40px;
  background-color: #1BA1FC;
  border-radius: 40px;
  transition: width 0.3s;
  overflow: hidden;
  cursor: pointer;
}

.add-new-button-icon {
  top: 0;
  right: 0;
  z-index: 4;
  position: absolute;
  color: #fff;
  transition: transform 0.2s;
  width: 40px;
  height: 40px;
}

.add-new-button-icon i {
  top: 12px;
  height: 100%;
  margin-left: 14px;
  position: relative;
}

.add-new-button:hover {
  width: 110px;
}

.add-new-button:hover .add-new-button-icon {
  transform: rotate(90deg);
}

.add-new-button-label {
  width: 80px;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  text-transform: uppercase;
  font-size: 14px;
  text-align: center;
  font-family: "Source Sans Pro", sans-serif !important;
  font-weight: 700;
  position: relative;
  margin-top: 5px;
  padding-left: 10px;
  -moz-transition: all 200ms ease-in;
  -webkit-transition: all 200ms ease-in;
  -o-transition: all 200ms ease-in;
  transition: all 200ms ease-in;
  opacity: 0;
}

.add-new-button:hover .add-new-button-label {
  transition-delay: 0.1s;
  visibility: visible;
  opacity: 1;
  color: #fff;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="add-new-button">
  <div class="add-new-button-label">
    Add
  </div>
  <div class="add-new-button-icon">
    <i class="fa fa-plus"></i>
  </div>
</div>

Answer 1

(对我而言)您的按钮似乎不需要 position: fixed;。它所需要的只是一些足够的空间来展开。

#container {
    border: 2px black solid;
    display: flex;
    justify-content: flex-end;
    width: 200px;
}

.add-new-button {
  position: relative;
  width: 40px;
  height: 40px;
  background-color: #1BA1FC;
  border-radius: 40px;
  transition: width 0.3s;
  overflow: hidden;
  cursor: pointer;
}

.add-new-button-icon {
  top: 0;
  right: 0;
  z-index: 4;
  position: absolute;
  color: #fff;
  transition: transform 0.2s;
  width: 40px;
  height: 40px;
}

.add-new-button-icon i {
  top: 12px;
  height: 100%;
  margin-left: 14px;
  position: relative;
}

.add-new-button:hover {
  width: 110px;
}

.add-new-button:hover .add-new-button-icon {
  transform: rotate(90deg);
}

.add-new-button-label {
  width: 80px;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  text-transform: uppercase;
  font-size: 14px;
  text-align: center;
  font-family: "Source Sans Pro", sans-serif !important;
  font-weight: 700;
  position: relative;
  margin-top: 5px;
  padding-left: 10px;
  -moz-transition: all 200ms ease-in;
  -webkit-transition: all 200ms ease-in;
  -o-transition: all 200ms ease-in;
  transition: all 200ms ease-in;
  opacity: 0;
}

.add-new-button:hover .add-new-button-label {
  transition-delay: 0.1s;
  visibility: visible;
  opacity: 1;
  color: #fff;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div id="container">
    <div class="add-new-button">
      <div class="add-new-button-label">
        Add
      </div>
      <div class="add-new-button-icon">
        <i class="fa fa-plus"></i>
      </div>
    </div>
</div>