How to make this button on css Ie, it’s not stupid to substitute background-image but to impose it. enter image description here

  • four
    Sausage looks like: D - Yuri
  • But seriously, it is difficult. I see a horizontal and vertical gradient, a white shadow on one side, a shadow that is smaller than an object that can be made through an additional element - Yuri
  • Button Generator for every taste and color bestcssbuttongenerator.com - Andrey

2 answers 2

Very similarly made, but with a minimum of styles.

a { /* Просто для демонстрации */ margin-top: 15px; display: block; width: 372px; height: 65px; border-radius: 48px/34px; background: linear-gradient(to left top, #ec643b, #e15b3a); box-shadow: 0 -3px #dc3d18, 0 -5px #ff7f44, 0 -7px #fb7039; } 
 <a href="#"></a>

Tips for those who would like to do better.

Who wants to play and do better, give advice:

  1. You can add additional colors to the gradients, and gradients support multiple colors, and after each color of the gradient you can specify any units of measure, as well as expressions like calc (100% - 2px) .

    See how the gradient behaves after changing the width of the window. Demonstration:

 a { /* Просто для демонстрации */ margin-top: 15px; display: block; width: 100%; height: 70px; background: linear-gradient(to right, blue 20px, red 20px, yellow 40px, orange calc(40px + 20%), green 40%, purple 300px, red calc(100% - 20px), blue calc(100% - 20px)); } 
 <a href="#"></a>

  1. If you need solid color shadows, use box-shadow , and box-shadow can be layered. Demonstration

 a { /* Просто для демонстрации */ margin-top: 15px; display: block; width: 100%; height: 70px; background-color: #ccc; box-shadow: 0 10px blue, 0 20px purple, 0 30px lime, 0 40px tomato; } 
 <a href="#"></a>

  1. If you need a gradient color shade, then you can achieve it either with the help of other elements or with the help of pseudo-elements before and after (this method is preferable, since it does not affect the markup). Sets the block position: relative; , and set the pseudo-elements position: absolute; as well as content: ""; so that they generally display a negative z-index in order to display the shadow behind the element, and not in front of it.

    Demonstration:

 a { /* Просто для демонстрации */ margin-top: 15px; display: block; width: 100%; height: 70px; background-color: #ccc; position: relative; } a:before { position: absolute; content: ""; left: 0; top: 20px; width: 100%; height: 100%; background: linear-gradient(to right, blue, red); z-index: -1; } 
 <a href="#"></a>

  • . And what about the highlight? But what about the gradient at the surface? But what about the darker color closer to the edges? - Alexey Shimansky
  • @ AlekseyShimansky You know, I didn’t set goals to make 1: 1. But if you want you can offer your option, I do not mind. - Vadim Ovchinnikov
  • Yes, no, I'm a noob ... - Alexey Shimansky
  • one
    And who voted against can tell what is wrong? - Vadim Ovchinnikov
  • @ Alexey Shimansky Added detailed tips on how to improve, so if you want, go ahead. - Vadim Ovchinnikov

Well, something like that. Not an exact copy came out

 div { display:block; position:relative; width:200px; height:40px; background: linear-gradient(to bottom, #dd3910 0%,#e25b39 49%,#dd3910 100%); border-radius: 20px; box-shadow: 0px -1px 0px #fbb185; } div:before { content: ''; display:block; position:absolute; width: 96%; height: 96%; background-color:#ff843b; border-radius: 20px; left: 2%; right: 2%; top: -3px; z-index: -1; } 
 <div></div>