Блог

Главная - Вопросы по программированию - Эффект наведения CSS. Граница элемента не закрыта

Эффект наведения CSS. Граница элемента не закрыта

#html #css

#HTML #css

Вопрос:

Первая кнопка без эффекта наведения, и она выглядит хорошо, однако во второй кнопке с эффектом наведения есть небольшое пространство, не закрытое из-за границы. Есть идеи, что вызывает это?

введите описание изображения здесь

Вот код, который я написал:

 :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>

Ответ №1:

в классе button add overflow: hidden; и в button::before удалить 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;
}