/*
  box-shadow: [inset?] [top] [left] [blur] [size] [color];
  提示：
????  - 我们将所有的模糊设置为0，因为我们需要一个实心填充。
????  - 添加inset关键字，使box-shadow位于元素的内部
????  - 在悬停时动画插入阴影看起来像元素从您指定的任何一侧填充（[top]和[left]接受负值变为[bottom]和[right]）
????  - 可以堆叠多个阴影
????  - 如果要为多个阴影设置动画，请确保保持相同数量的阴影，以使动画平滑。 否则，你会得到一些不稳定的东西。
*/
.fill:hover,
.fill:focus {
  box-shadow: inset 0 0 0 2em var(--hover);
}

.pulse:hover,
.pulse:focus {
  -webkit-animation: pulse 1s;
          animation: pulse 1s;
  box-shadow: 0 0 0 2em rgba(255, 255, 255, 0);
}

@-webkit-keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 var(--hover);
  }
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 var(--hover);
  }
}
.close:hover,
.close:focus {
  box-shadow: inset -3.5em 0 0 0 var(--hover), inset 3.5em 0 0 0 var(--hover);
}

.raise:hover,
.raise:focus {
  box-shadow: 0 0.5em 0.5em -0.4em var(--hover);
  -webkit-transform: translateY(-0.25em);
          transform: translateY(-0.25em);
}

.up:hover,
.up:focus {
  box-shadow: inset 0 -3.25em 0 0 var(--hover);
}

.slide:hover,
.slide:focus {
  box-shadow: inset 6.5em 0 0 0 var(--hover);
}

.offset {
  box-shadow: 0.3em 0.3em 0 0 var(--color), inset 0.3em 0.3em 0 0 var(--color);
}
.offset:hover, .offset:focus {
  box-shadow: 0 0 0 0 var(--hover), inset 6em 3.5em 0 0 var(--hover);
}

.fill {
  --color: #a972cb;
  --hover: #cb72aa;
}

.pulse {
  --color: #ef6eae;
  --hover: #ef8f6e;
}

.close {
  --color: #ff7f82;
  --hover: #ffdc7f;
}

.raise {
  --color: #ffa260;
  --hover: #e5ff60;
}

.up {
  --color: #e4cb58;
  --hover: #94e458;
}

.slide {
  --color: #8fc866;
  --hover: #66c887;
}

.offset {
  --color: #19bc8b;
  --hover: #1973bc;
}

button:hover, button:focus {
  border-color: var(--hover);
  color: #fff;
}

div.buttonDiv button {
  background: none;
  width: auto;
  height: auto;
  line-height: 1;
  margin: 0.5em;
  padding: 1em 2em;
  font: inherit;
  color: var(--color);
  transition: 0.25s;
  border: 2px solid;
}

div.buttonDiv {
  position: fixed;
  left: 10px;
  bottom: 10px;
  opacity: 0;
  transition: 0.5s;
  justify-content: center;
  display: flex;
}

div.buttonDiv:hover {
  opacity: 1;
}

div.DIVButton {
  opacity: 0;
  justify-content: center;
  display: flex;
  transition: 0.5s;
}
div.DIVButton:hover {
  opacity: 1;
}