Hello!
There is an attached image. It is the site navigation button.
It so happened that with the background-size: cover; property background-size: cover; Adaptive layout shifts the text due to a change in the size of the block allocated for the buttons.
In the end, I decided to create it using CSS, but I’m not going to know how to create such "cogs" in the corners, embossing around the perimeter and a slight diffuse white noise.
Please help, I will be very grateful! enter image description here

  • one
    : before /: after the image for the left / right side - NeedHate
  • @NeedHate these are exactly the bolts, right? - Quick Brown Fox
  • one
    @Quick Brown Fox, that's right, they will be pseudo elements. - NeedHate
  • @HamSter by writing this value, the image is gone - Quick Brown Fox
  • Maybe all the same these screws with pictures to leave? - Vitaliy Tretyakov

2 answers 2

such as:

 * { 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>

If the screws themselves are done using css tools, then the codepen example

    Alternatively, without using pictures:

     * { 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>

    • the class! At the top, only an extra pink stripe - Alexandr_TT
    • @Alexandr_TT look, not superfluous ;-) This is the volume, as it were. In addition, it is on the original picture. But the inner pink light shadow I was too lazy to do) - UModeL
    • Exactly, in the original, there is a pink strip, you are just like a left-handed person, shod a flea and did better - a volumetric bottom. And the top can still be better, the left and right indents can be moved inwards for the edge of the pink strip for volume. The light source for the bottom of the button turned out in the center and for the top also needs to be done. This I mean, if you agree and it is not difficult to do. And you can not do, and so everything is cool !. - Alexandr_TT
    • @Alexandr_TT "finish" later. Fortunately, the system allows) And now the crane is busy))) - UModeL