Перевести PNG в HTML

Question

Как сделать кнопку максимально похожей на изображение? Когда я изменяю шрифт-сайз для знака доллара, то он съезжает куда-то вниз и кнопка слишком сильно увеличивается в длину. Так же адаптивность желательно не убирать и оставить все в процентах, а не в пикселях, если получится. И может кто-то знает, что это за шрифт или хотя бы знает похожий? Буду благодарен.

jsfiddle.net/4macrqb5/

Верхний блок - изображение

Нижний блок - кнопка, которую и надо сделать похожей на верхний блок

Answer 1

.donation_image {
    position: relative;
    margin-left: 20%;
    margin-right: 20%;
}

img {
    max-width: 100%;
    height: auto;
}


.donate_url {
    position: relative;
    margin-left: 20%;
    margin-right: 20%;
}

.button_donation {
    display: inline-block;
    border: none;
    background: #0175FC;
    background: linear-gradient(to right, #0175FC, #3268B5);
    width: 100%;
    height: auto;
    cursor: pointer;
}

.donate_text {
  display: inline;
    padding-left: 1.5%;
    color: #fff;
    font-size: 4em;
    width: 100%;
}

.dollar {
  display: inline;
    padding-right: 0;
    color: #60D0FF;
    font-size: 4em;
    text-align: right;
    /* padding-right: 3 */
}
.dollar span{
  position: absolute;
  right:0;
}

<div class="donation_image">
  <a href="https://www.google.com" target="_blank">
    <img src="https://i.ibb.co/pQCCH0G/donate.png" alt="Задонатить">
  </a>
</div>

<div class="donate_url">
  <a href="https://www.google.com" target="_blank">
      <div class="button_donation">
          <div class="donate_text">Задонатить</div> 
          <div class="dollar">
          <span>$</span>
          </div>
      </div>
  </a>
</div>

БЛОГ НА HUSL

Перевести PNG в HTML

Ответы (1 шт):