There is a button "Leave a request", it has a gradient, and the name that should be placed in the center, while the button should be output https://yadi.sk/i/skcVyiiN3SqdHm

.main-left .buttom { /* Style for "Rounded Re" */ width: 240px; height: 50px; border-radius: 25px; background-color: #362753; background-image: linear-gradient(to right, #ea2363 0%, #ff8a65 100%); margin: auto auto 116px 130px; } 
 <div class="buttom"> Оставить заявку </div>

And there is also an additional description of the services, but it is impossible to make the separation of lines https://yadi.sk/i/8xSiQubY3SqfPm

In code so

 .main-left .priceinfo { /*display: inline;*/ margin: 50px auto 46px 130px; width: 292px; padding: 10px; font-size: 20px; background-color: #090a0b; color: #ffffff; } 
 <div class="priceinfo">Оплата только за фактически<br> выполненные работы </div>

  • First, the button must be imprinted with the appropriate tags - button or a, depending on what should happen by clicking on it. Secondly, to perform these tasks it is enough to have some basic knowledge of layout. And in the examples, specify the appropriate markup styles, if you want to show what is wrong. In general, as for me, the question from the category "I do not want to think for myself, do it for me." - Darina Goodwill

2 answers 2

 * { box-sizing: border-box; } .button-wrap { text-align: center; } .button { display: inline-block; padding: 15px 25px; color: #fff; text-decoration: none; background: linear-gradient(to right, rgba(235, 30, 99, 1) 0%, rgba(255, 139, 101, 1) 100%); border-radius: 25px; } .priceinfo { display: inline; margin: 0; width: 292px; font-size: 20px; line-height: 1.5; background-color: #090a0b; color: #ffffff; box-shadow: 10px 0 0 #090a0b, -10px 0 0 #090a0b; } 
 <div class="button-wrap"> <a href="#" class="button">Оставить заявку</a> </div> <br> <div class="priceinfo"> Оплата только за фактически<br> выполненные работы </div> 

     .buttom { /* Style for "Rounded Re" */ width: 240px; height: 50px; border-radius: 25px; background-color: #362753; background-image: linear-gradient(to right, #ea2363 0%, #ff8a65 100%); margin: auto auto 116px 130px; text-align: center; /* центр по горизонтали */ line-height: 50px; /* по вертикали - но нельзя две строки */ }

    or

     .buttom { /* Style for "Rounded Re" */ width: 240px; height: 50px; border-radius: 25px; background-color: #362753; background-image: linear-gradient(to right, #ea2363 0%, #ff8a65 100%); margin: auto auto 116px 130px; display: flex; justify-content: center; align-items: center; }