倾斜按钮悬停动画[关闭]

Question

我看到了这个很酷的按钮悬停效果，但我不确定如何使用 HTML 和 CSS 来做到这一点。

不太确定如何开始

我猜有什么

transform: skew()

或使用一些伪元素::before

我在下面添加了我在哪里看到的视频： https://share.vidyard.com/watch/k9A4s9aYk1A3i7YBHGgSWT？

Answer 1

<div class='container'>
  <div class='d1'></div>
  <div class='d2'></div>
  <div class='d3'></div>
  <div class='main'>
    <div class='d4'></div>
  </div>
</div>

.container {
  display: inline-flex;
  gap: 5px;
  width: 100px;
  margin: 20px;
  transition: all 0.4s linear;
  
}

.container:hover{
  gap: 0;
}


.d1, .d2, .d3, .d4 {
  background: green;
  transform: skew(-20deg, 0deg);
}

.d1{
  height: 50px;
  width: 5px;
}

.d2{
  height: 50px;
  width: 10px;
}

.d3{
  height: 50px;
  width: 20px;
}

.main{
  position: relative;
  left: -10px; /* Compensate d4 margin gap */
  height: 50px;
  width: 80px;
  overflow: hidden;
}

.main::after{
  content: 'Shop';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 10px;
  color: white;
  transition: all 0.4s ease;
}

.container:hover .main::after{
  right: 30px;
}

.d4{
  height: 100%;
  width: 200%;
  margin-left: 10px;
}