Редизайн кнопочки стандартного слайдера Taplink

Т.к. таплинк еще недавно был просто платформой для мультиссылок, у него не хватает стандартных возможностей кастомизации. Например, недавно я столкнулся с проблемой невозможности сделать фон кнопки в слайдере прозрачным, т.к. через стандартные стили там цвет задается с "!important", что невозможно "перебить" через CSS-код

Однако выход есть, я сделал код, который обнуляет ВСЕ стили на кнопках слайдера. После этого можно задать свои стили самостоятельно

Код:

<script>
Array.from(document.querySelectorAll(".slider-slide-link")).map((links) => {
links.className ="slider-slide-link-new has-animation has-animation-tada";
});
</script>
<style>
  .slider-slide-link-new {
  /* закругление кнопочек */
border-radius: 0px;
   /* размер шрифта кнопочек (сейчас в относительных величинах, может быть дробным, например 1.9em. Можете поменять на размер в пикселях типа "16px" */
    font-size: 2em;
  /* Цвет текста кнопочки */
    color: tomato;
   /* Отступы от текста кнопки до краев. Первое значение — по вертикали, второе — по горизонтали */
      padding: 17px 20px;
  text-decoration: none;
    text-align: center;
      box-sizing: border-box;
    display: block;
  /* Цвет обводки кнопочки */
  border: 2px solid #c7a196;
  /* Расстояние от кнопки до слайдов */
  margin-top: 30px;
}
</style>

Заодно я нашел способ добавлять стандартные анимации кнопок из таплинка на эти кнопки. Чтобы добавить анимашки, нужно в коде выше взять строчку

Array.from(document.querySelectorAll(".slider-slide-link")).map((links) => {
links.className ="slider-slide-link-new

и переделать ее на:

1 Для анимации "блик"

Array.from(document.querySelectorAll(".slider-slide-link")).map((links) => {
links.className ="slider-slide-link-new has-animation has-animation-blink";

2 Для анимации "та да"

Array.from(document.querySelectorAll(".slider-slide-link")).map((links) => {
links.className ="slider-slide-link-new has-animation has-animation-tada";

3 Для анимации "вибрация"

Array.from(document.querySelectorAll(".slider-slide-link")).map((links) => {
links.className ="slider-slide-link-new has-animation has-animation-buzz";

4 Для анимации "колебание"

Array.from(document.querySelectorAll(".slider-slide-link")).map((links) => {
links.className ="slider-slide-link-new has-animation has-animation-wobble";

5 Для анимации "встряхивание х"

Array.from(document.querySelectorAll(".slider-slide-link")).map((links) => {
links.className ="slider-slide-link-new has-animation has-animation-shake-x";

6 Для анимации "встряхивание у"

Array.from(document.querySelectorAll(".slider-slide-link")).map((links) => {
links.className ="slider-slide-link-new has-animation has-animation-shake-y";

7 Для анимации "резинка"

Array.from(document.querySelectorAll(".slider-slide-link")).map((links) => {
links.className ="slider-slide-link-new has-animation has-animation-rubber";

8 Для анимации

Array.from(document.querySelectorAll(".slider-slide-link")).map((links) => {
links.className ="slider-slide-link-new has-animation has-animation-pulse";

9 Для анимации "сердцебиение"

Array.from(document.querySelectorAll(".slider-slide-link")).map((links) => {
links.className ="slider-slide-link-new has-animation has-animation-heart";

Также вы можете добавлять анимашки появления по тому же принципу, добавляя в этот код вместо стандартных has-animation has-animation-heart названия из анимаций появления. Йуху!