Реализация кнопки

281

29 октября 2017, 18:32

Добрый день! Подскажите, как реализовать такую кнопку:

Интересуют именно линии в углах кнопки, выделенные на скрине.

Answer 1

* { 
  box-sizing: border-box; 
} 
 
body { 
  background: #0A1527; 
} 
 
.btn { 
  display: inline-block; 
  padding: 15px 25px; 
  min-width: 200px; 
  text-align: center; 
  color: #fff; 
  background: #101A2D; 
  position: relative; 
  transition: .3s; 
} 
 
.btn:before, 
.btn:after { 
  content: ''; 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 15px; 
  height: 15px; 
  border: 2px solid #565D6B; 
  border-right: none; 
  border-bottom: none; 
  transition: transform .5s; 
} 
 
.btn:after { 
  top: auto; 
  left: auto; 
  bottom: 0; 
  right: 0; 
  border: 2px solid #565D6B; 
  border-left: none; 
  border-top: none; 
} 
 
.btn:hover { 
  background: #f00; 
} 
 
.btn:hover:before { 
  transform: translate(-5px, -5px); 
} 
 
.btn:hover:after { 
  transform: translate(5px, 5px); 
}