February 22, 2022

Любые кнопки с помощью SVG в Taplink

Видео: https://youtu.be/E7LvwQdJEFc

Порядок действий:

  1. Рисуете картинку пером и геометрическими примитивами
  2. Жмете по ней правой кнопкой мыши, потом "copy as svg"
  3. Вставляете код в энкодер https://yoksel.github.io/url-encoder/
  4. В графе insert SVG дописываете значения, которые вам нужны по видео
  5. Копируете текст из графы ready to css
  6. Вставляете в код-обнуляшку

Значения из видео:

vector-effect="non-scaling-stroke"
preserveAspectRatio='none'

Первое отвечает за пропорции обводок

Второй отвечает за несохранение пропорций картинки в целом

Код обнуления кнопочек, в который надо вставлять свой фон:

<style>
.btn-link:before {
display: none;
}
.block-link {
  width: 100%;
  --link-saturate: none;
  --link-border-color: transparent;
    margin: auto;

}
</style>