Добавляем возможность скачивать файлы с таплинка

Чтобы дать возможность скачивать файлы со своего таплинка, сперва нам необходимо куда-то их загрузить. Рекомендую использовать https://drive.google.com/. Он бесплатен, и, в отличие от яндекс диска, не запрещен на территории братской Украины.

Теперь грузим файлик на гугл диск и жмет по значку ссылки

Делаем доступ "читатель", копируем перед выходом себе ссылку и сохраняем

Заходим на https://www.votix.ru/p/generator-pryamykh-ssylok-google-disk.html и генерируем ссылку на скачивание. Теперь при нажатии на кнопку с такой ссылкой пользователь будет не переходить в ваш профиль гугл диска, а будет сразу скачивать, что, несравненно, удобно, а главное, выглядит не по-сельски, так что можно будет использовать для любого своего проекта :з

Берем код:

<a class="download-btn" href="#">Скачать</a>

<style>
  .download-btn  {
  margin: auto;
  display: block;
  text-align: center;
  max-width: 350px;
  background: #E7EAED;
  padding: 15px 25px;
  border-radius: 6px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 2px;
  filter: drop-shadow(0 0 5px rgba(0,0,0, 0.4));
  cursor: pointer;
  transition: 0.5s;
    color: black;
    text-decoration: none;
}
.dwnlded {
  color: transparent;
  position: relative;
}
.dwnlded::before {
position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  margin: auto;
  content: '✓';
 color: black;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
 justify-content: center;
  animation: anim-dwnld 0.4s linear normal forwards 1;
  opacity: 0;
  transform: scale(0.1);
}
.dwnlded::after {
position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  margin: auto;
  content: '';
 color: black;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  border: 2px solid black;
  display: flex;
  align-items: center;
 justify-content: center;
  animation: anim-dwnld 0.4s linear normal forwards 1;
  opacity: 0;
  transform: scale(0.1);
}
@keyframes anim-dwnld {
  0% {
    opacity: 0;
    transform: scale(0.1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    
  }
}
</style>

<script>
  Array.from(document.querySelectorAll('.download-btn')).map((dwnld) => {
  dwnld.onclick = function() {
    dwnld.classList.add('dwnlded');
    setTimeout(() => {
      dwnld.classList.remove('dwnlded');}, 5000);
  }
  
});
</script>

И вставляем в таплинк.

В части

<a class="download-btn" href="#">Скачать</a>

Вместо # вставьте свою ссылку. Вместо "скачать" можете написать любое свое слово. Можете дублировать эту строчку, чтобы сделать несколько кнопок. Дублированную строчку можно даже вставить отдельным html-блоком в таплинке, все равно сработает.

В этой части

  .download-btn  {
  background: #E7EAED;
  padding: 15px 25px;
  border-radius: 6px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 2px;
  filter: drop-shadow(0 0 5px rgba(0,0,0, 0.4));
  cursor: pointer;
  transition: 0.5s;
  }

Можете поменять цвет фона, #E7EAED этой мой цвет, замените его на свой с помощью https://colorscheme.ru/color-converter.html под свой дизайн

Также можете добавить строчку с font-family по уроку со шрифтами.

border-radius: 6px; — закругление углов

font-weight: 900; — толщина букавок

text-transform: uppercase; — все буквы большие. Если не нужно делать все буквы большими, удалите эту строчку

letter-spacing: 2px; — расстояние между буквами. Удалите эту строчку, если не нужно его дополнительно увеличивать

filter: drop-shadow(0 0 5px rgba(0,0,0, 0.4)); — тень. Вместо первого нолика можете указать значение в пикселях, соответствующее смещению по иксу, например -2px или 5px, если нужно смещение тени. ВТорой нолик — смещение по игреку. 5px — ширина тени rgba(0,0,0, 0.4) — цвет тени, можете заменить на свой цвет тени в сервисе выше

.dwnlded::before {
position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  margin: auto;
  content: '✓';
 color: black;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
 justify-content: center;
  animation: anim-dwnld 0.4s linear normal forwards 1;
  opacity: 0;
  transform: scale(0.1);
}
.dwnlded::after {
position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  margin: auto;
  content: '';
 color: black;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  border: 2px solid black;
  display: flex;
  align-items: center;
 justify-content: center;
  animation: anim-dwnld 0.4s linear normal forwards 1;
  opacity: 0;
  transform: scale(0.1);
}

В этом безобразии color: black; — цвет галочки
border: 2px solid black — цвет кружочка. Можете поменять на своё

Кнопка при нажатии меняет свой текст на галочку в кружочке, а через 5 секунд возвращается к изначальному виду