Как сделать двигающиеся полосы на чистом css

Question

Появилась задача сделать полосы вокруг кнопки

Делал на Code Pen через ::before , ::after и в них делал box-shadow, но ничего не получилось

.container {
  font-size: 40px;
  border: 1px solid red;
  width: 200px;
  padding: 20px;
  &:hover {
    background-color: #ff4e50;
    color: #fff;
  }
}

.container::after {
  box-shadow: 3px 3px red
}

<button class="container">Contact</button>

Answer 1

Для того что бы :before и :after отображались, у них нужно задавать свойство content.

body {
  background: black;
}

button {
  color: white;
  background: transparent;
  border: none;

  position: relative;

  line-height: 250%;
}

button:before,
button:after {
  position: absolute;
  display: block;
  content: "";
  width: 15px;

  height: 3px;
  background: red;

  transition-duration: 0.7s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

button:before {
  left: calc(100% - 15px);
}
button:after {
  right: calc(100% - 15px);
}

button:hover:before {
  left: 0;
}
button:hover:after {
  right: 0;
}

<button>contact</button>

Answer 2

Хм.. Вариант с использованием linear-gradient

.effect {
  display: inline-block;
  padding: 5px 0;
  --color: red; /* Цвет */
  background:
    linear-gradient(to left, var(--color), var(--color)),
    linear-gradient(to left, var(--color), var(--color));
  background-repeat: no-repeat;
  background-position: top left, bottom right;
  background-size: 20% 3px; /* ширина и высота */
  transition: all .3s linear;
}

.effect:hover {
  background-position: top right, bottom left;
}

<div class="effect">Hover me</div>

БЛОГ НА HUSL

Как сделать двигающиеся полосы на чистом css

Ответы (2 шт):