Does not fit until the end of the content

Jsfiddle example

.button_name { position: absolute; top: 115px; right: 0; line-height: 56px; padding-left: 25px; min-width: 162px; -webkit-border-radius: 10px; border-radius: 10px; color: #fff; letter-spacing: 1px; font-family: Interface-bold, sans-serif; background: url(https://i.imgur.com/W94Hceq.png) no-repeat; -webkit-box-sizing: border-box; box-sizing: border-box; } .button_name::before { content: ''; display: inline-block; position: absolute; height: 15px; width: 15px; top: 50%; right: 19px; background: url(https://i.imgur.com/vrHcNuM.png) no-repeat; -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); } 
 <a href="#" class="button button_name">Deposit 100500</a>

  • Well, you can reduce the font or add width - Air
  • Frankly, it’s not quite clear what the button means adaptively ... - Air
  • "Rubber" for the amount of text - IvanZ

2 answers 2

Simply set the background of the button through the gradient , and so your code is corrected:

 .button_name { position: absolute; top: 115px; right: 0; line-height: 56px; //padding-left: 25px; padding: 0 50px 0 25px; // От меня min-width: 162px; -webkit-border-radius: 10px; border-radius: 10px; color: #fff; letter-spacing: 1px; font-family: Interface-bold, sans-serif; background: url(https://i.imgur.com/W94Hceq.png) no-repeat; background-size: 100%; // От меня -webkit-box-sizing: border-box; box-sizing: border-box; } .button_name::before { content: ''; display: inline-block; position: absolute; height: 15px; width: 15px; top: 50%; right: 19px; background: url(https://i.imgur.com/vrHcNuM.png) no-repeat; -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); } 
 <a href="#" class="button button_name">Deposit 100500</a>

    As I understand the question.

     .button_name { position: absolute; top: 20px; right: 50%; padding: 20px 20px 20px 10px; border-radius: 10px; color: #fff; letter-spacing: 1px; font-family: Interface-bold, sans-serif; background: url(https://i.imgur.com/W94Hceq.png) no-repeat; background-size: 100% 100%; } .button_name::before { content: url(https://i.imgur.com/vrHcNuM.png); padding: 0 5px; display: inline-block; } 
     <a href="#" class="button button_name">Deposit 1005000000000</a>

    • Just wanted to write, поиграй с padding-ом - Air
    • I thought that :: before is not quite properly used. In general, as one of the decisions has the right to life) - Alexey Drizhakov
    • I agree. there should be a container ... two blocks inside ... more competently more adaptive ... I would implement it like this ... - Air
    • It is always nice to get praise from the masters ;-). With thanks. - Alexey Drizhakov