Как создать такую кнопку с помощью СSS?

210

21 июня 2019, 05:00

Здравсвтуйте!
Есть прикрепленное изображение. Оно является кнопкой меню навигации по сайту.
Так получилось, что при свойстве background-size: cover; при адаптивной верстке смещается текст из-за изменения размера блока, отведенного под кнопки.
В итоге, я решил создать её с помощью CSS, но ума не приложу, как создать подобные "винтики" по углам, тиснение по периметру и легкий размытый белый шум.
Пожалуйста, помогите, буду премного благодарен!

Answer 1

как например:

* { 
  box-sizing:border-box; 
} 
 
html, 
body { 
  padding: 0; 
  margin: 0; 
} 
 
.btn { 
  display: inline-block; 
  padding: 20px 30px; 
  margin: 50px; 
  font-family: sans-serif; 
  font-weight: bold; 
  text-decoration: none; 
  color:#fff; 
  background: #a23b30; 
  border-radius: 4px; 
  box-shadow: 0px 3px 0px 0px #4f0c07; 
  position: relative; 
} 
 
 
.btn>span:before, 
.btn>span:after, 
.btn:before, 
.btn:after { 
  content:''; 
  width: 10px; 
  height: 10px; 
  background: url(https://cdn130.picsart.com/262053088007211.png?r1024x1024) center no-repeat; 
  -webkit-background-size: cover; 
  background-size: cover; 
  position: absolute; 
  top: 5px; 
} 
 
.btn>span:before, 
.btn>span:after { 
  bottom: 5px; 
  top:auto 
} 
 
.btn>span:before, 
.btn:before { 
  left: 5px; 
} 
 
.btn>span:after, 
.btn:after { 
  right: 5px; 
}

<a href="" class="btn"><span>Lorem ipsum.</span></a>

Если же и сами шурупы делать средствами css, то codepen пример

Answer 2

Как вариант, без использования картинок:

* { margin: 0; box-sizing: border-box; padding: 0; } 
 
.btn_main { 
  font: 5em 'Arial'; 
  position: relative; 
  width: 450px; 
  height: 180px; 
  margin: 1% auto; 
  border-radius: 8px; 
  background: rgba(160, 70, 60, 1); 
  box-shadow: inset 0 -10px 2px -3px #510d09, inset 0 10px 2px -3px #f7dedb, 0 16px 20px -13px black; 
  transition: box-shadow .3s ease-in-out; 
} 
.btn_main:hover { 
  box-shadow: inset 0 -10px 2px -3px #510d09, inset 0 10px 2px -3px #f7dedb, 0 9px 25px -10px black; 
} 
 
.btn_screw { 
  --pad-H: 2.7%; 
  --pad-V: 12.7%; 
  position: absolute; 
  width: 30px; 
  height: 30px; 
  overflow: hidden; 
  border-radius: 50%; 
  border: 4px solid rgba(0, 0, 0, 0.1); 
  box-shadow: 0 1px 12px 3px rgba(0, 0, 0, 0.55); 
  background: radial-gradient(76% 44%, #cfcfcf 40%, #888 72%) no-repeat 0px -7px, #888; 
} 
.btn_screw:before { 
  content: ''; 
  position: absolute; 
  left: 50%; 
  width: 0; 
  height: 100%; 
  box-shadow: 0 0 3px 1.3px black; 
} 
.btn_screw:after { 
  content: ''; 
  position: absolute; 
  top: 50%; 
  height: 0; 
  width: 100%; 
  box-shadow: 0 0 3px 1px black; 
} 
.btn_screw:nth-child(1) { top: var(--pad-V); left: var(--pad-H); } 
.btn_screw:nth-child(2) { top: var(--pad-V); right: var(--pad-H); } 
.btn_screw:nth-child(3) { bottom: var(--pad-V); right: var(--pad-H); } 
.btn_screw:nth-child(4) { bottom: var(--pad-V); left: var(--pad-H); } 
 
.btn_text { 
  position: absolute; 
  top: 50%; 
  left: 50%; 
  transform: translate(-50%, -50%); 
  color: rgba(160, 70, 60, 1); 
  text-align: center; 
  white-space: nowrap; 
  text-shadow: -1px -2px 9px black, 1px 1px 5px white; 
}

<div class="btn_main"> 
  <div class="btn_screw"></div><div class="btn_screw"></div><div class="btn_screw"></div><div class="btn_screw"></div> 
  <div class="btn_text">Button</div> 
</div>