Html 悬停时倾斜效果错误

.button-skew {
  position: relative;
  width: fit-content;
  padding: 6px 40px;
  border-radius: 5px;
  transform: skewX(-7.5deg);
  background: blue;
  transition: all 0.35s cubic-bezier(.47, 1.64, .41, .8);
}

.button-skew:hover {
  padding: 6px 60px;
  transform: skewX(-7.5deg);
  background: red;
  transition: all 0.35s cubic-bezier(.47, 1.64, .41, .8);
}

p {
  position: relative;
  font-size: 16px;
  font-weight: 500;
  line-height: 26px;
  letter-spacing: 0em;
  text-align: center;
  color: white;
  transform: skewX(7.5deg);
}

<div class="button-skew">

  <p>Contact us</p>

</div>

will-change: transform;

.button-skew {
  position: relative;
  width: fit-content;
  padding: 6px 40px;
  border-radius: 5px;
  transform: skewX(-7.5deg);
  background: blue;
  transition: background 0.35s cubic-bezier(.47, 1.64, .41, .8),
  padding 0.35s cubic-bezier(.47, 1.64, .41, .8);
  
  will-change: transform;
}

.button-skew:hover {
  padding: 6px 60px;
  background: red;
}

p {
  position: relative;
  font-size: 16px;
  font-weight: 500;
  line-height: 26px;
  letter-spacing: 0em;
  text-align: center;
  color: white;
  transform: skewX(7.5deg);
}

<div class="button-skew">

  <p>Contact us</p>

</div>

Html相关问答推荐

如何防止SVG图标出现断行？

当在双引号｜Angular .html文件中使用时，Pretier会将单引号字符替换为&；Quot；

未显示新组件的视图

如何在div中淡入和淡出渐变背景？

更改Angular 为17的material Select 字段的高度？

如何使用CSS创建文件夹选项卡的形状？

在弹性框布局中的第n个元素后强制换行

如何用背景色填充边框半径创建的间隙

如果您将带有 html 标签的字符串数据(name ： test) 放在 `

` 中，则这些标签不起作用

视频重新加载而不是在 Swift 中暂停 WKWebView

如何使用 Tailwind CSS 分隔导航栏中的元素？

这两个CSS中的网格居中对齐内部盒子有什么区别？

如何使用CSS Select 同级元素的：：before伪元素？

使用 R markdown 在 html 中包含图像

pandas `to_html()` - 如何只使特定的行有边框

更改标签标签的大小

使用 bootstrap-icons 的未排序图标堆栈

HTML 标记未在页面上展开

focusout() Select 器不适用于搜索框