3

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

скрин кнопки которую нужно сделать

Делал на 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>

2 ответа 2

4

Для того что бы :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>

3
  • 2
    left и right стоит заменить на translateX
    – Vasily
    19 сен 2020 в 9:41
  • А по какой причине?
    – Ein
    19 сен 2020 в 9:42
  • @Ein, ибо на обработку translate тратится меньше ресурсов.
    – De.Minov
    19 сен 2020 в 11:21
4

Хм.. Вариант с использованием 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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.