Как правильно сверстать?

Question

[Qurel]

spoiler

Comments

[Даниил Сугоняев]

Чтож вы берете такие зубодробительные задачи, если, видимо, недостаточно опыта)
Такое можно сверстать абсолютами

[Qurel]

вот я и хочу набраться опыта, поэтому и спрашиваю

Answer 1

[Eugene Chefranov]

Кнопка
<a href="#" class="btn">Оценить проект</a>

.btn {
  text-decoration: none;
  text-transform: uppercase;
  display:inline-block;
  position: relative;
  padding: 10px 15px;
  color: #000;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  border-left: 1px solid transparent;
  border-right: 1px solid transparent;
  transition: all 0.5s;
}

.btn:hover {
  border: 1px solid #000;
}

.btn:hover:after,.btn:hover:before  {
  opacity: 0;
}

.btn:before, .btn:after {
  content: "";
  display: block;
  position: absolute;
  background-color: #fff;
  height: 3px;
  width: 70%;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  transition: all 0.5s;
}

.btn:after {
  top: auto;
  bottom: -1px;
}

А блоки абсолютами и марджинами

Comments

[Qurel]

Спасибо за ответ. Благодаря вашему ответу я поняла принцип, сделала немного по-другому:

.btn {
  color: #191919;
  font-family: "DIN Pro", Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  display: inline-block;
  padding: 30px 74px;
  border-top: 1px solid #191919;
  border-bottom: 1px solid #191919;
  position: relative;
}

.btn:before, .btn:after {
  content: '';
  display: block;
  width: 55%;
  height: 1px;
  background-color: #fff;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.btn:before {
  bottom: 100%;
}

.btn:after {
  top: 100%;
}