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
    Commented 19 сент. 2020 в 9:41
  • А по какой причине?
    – Ein
    Commented 19 сент. 2020 в 9:42
  • @Ein, ибо на обработку translate тратится меньше ресурсов.
    – De.Minov
    Commented 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>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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