How to impose such a button? The button is transparent, back gradient. If there was a simple background, it would be possible through a pseudo-element. If you cut with a gradient and spasirovat, then the adaptive will not docking. http://prnt.sc/ef3ik4

  • This button can be viewed somewhere online and not a picture? - koks_rs

3 answers 3

The solution is this: make a frame and rounding, but here we just remove the frame on the left side, the background is transparent. Cut out the top / bottom rounding and set them with pseudo-elements. We bind the button into one more block, and set the phone icon through the pseudo-element to this block

  • Give a working example - Kirill Korushkin

You can make the desired shape of the button in Photoshop. Then you put through the CSS background which made:

.button { width: 200px; height: 80px; border: 0px; outline: none; background: url("images/button_black.png") no-repeat center; }

It turns out something like this:

example of a button http://image.prntscr.com/image/12cf0a5e5f494dab839e986aaf41a2c5.png

    Clumsy, but shows how to do it. Instead of background:red in .your-button:before specify the picture and background-size:cover that it takes up the whole "box"

     .blue { background: blue; height: 200px; } .button-container { position: relative; width: 100px; margin: 0 auto; } .your-button { border: 2px solid orange; border-radius: 20px; border-left: none; background: transparent; color: #fff; font-size: 20px; padding: 5px 15px; } .your-button:before { content: ''; width: 20px; height: 20px; background: red; position: absolute; left: -5px; } 
     <div class="blue"> <div class="button-container"> <button class="your-button">Отправить</button> </div> </div>