<button class="btn">悬浮动画按钮</button>

body {

  display: flex;

  justify-content: center;

  align-items: center;

  height: 100vh;

}

.btn {

  background-color: transparent;

  border-radius: 8px;

  border: 2px solid rgb(255, 123, 0);

  color: rgb(255, 123, 0);

  padding: 15px 35px;

  position: relative;

  cursor: pointer;

  overflow: hidden;

  transition: all 1s;

  font-size: 20px;

}

.btn:hover {

  color: white;

  font-weight: 700;

}

​

.btn::before {

  content: "";

  height: 100%;

  width: 0%;

  position: absolute;

  left: -30px;

  top: 0;

  background-color: rgb(255, 123, 0);

  transform: skewX(45deg);

  transition: all 0.5s;

  z-index: -1;

}

.btn:hover::before {

  width: 180%;

}

​