Question

第一个按钮没有悬停效果，看起来不错，但是在第二个具有悬停效果的按钮中，由于边框而没有覆盖一些小的空间。知道是什么原因造成的吗？

这是我写的代码：

:root {
  font-size: 1em;
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
}

.container {
  padding: 2em;
}

.button {
  position: relative;
  display: inline-block;
  text-transform: uppercase;
  font-size: 1.1rem;
  font-weight: 800;
  color: #fff;
  background: #038C7E;
  padding: .85em 1.25em;
  letter-spacing: .05em;
  box-shadow: 4px 3px 8px 0 rgba(0, 0, 0, .25);
  border-radius: .35em;
  border-width: 0 0 .1875em 0;
  border-style: none none solid none;
  border-color: transparent transparent rgba(0, 0, 0, .25) transparent;
}

.button::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  opacity: .2;
  background: #000;
  border-radius: inherit;
  transform: scaleX(0);
  transform-origin: 50%;
  transition: transform ease-in-out .3s;
}

.button:hover::before {
  transform: scaleX(1);
}

<!DOCTYPE html>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="button-hover-shutterout.css">
  <title>Button Hover Shutterout</title>
</head>
<body>
  <div class="container">
    <a class="button" href="#" role="button">Learn More</a>
  </div>
</body>
</html>

Answer 1

在按钮类中添加overflow: hidden;并在按钮:::中，如下所示删除border-radius: inherit;：

.button {
  position: relative;
  display: inline-block;
  text-transform: uppercase;
  font-size: 1.1rem;
  font-weight: 800;
  color: #fff;
  background: #038C7E;
  padding: .85em 1.25em;
  letter-spacing: .05em;
  box-shadow: 4px 3px 8px 0 rgba(0, 0, 0, .25);
  border-radius: .35em;
  border-width: 0 0 .1875em 0;
  border-style: none none solid none;
  border-color: transparent transparent rgba(0, 0, 0, .25) transparent;
  overflow: hidden;/*Add This */
}

.button::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  opacity: .2;
  background: #000;
  /* border-radius: inherit; */
  transform: scaleX(0);
  transform-origin: 50%;
  transition: transform ease-in-out .3s;
}

CSS悬停效果。元素的边框未覆盖

1 个答案: