Как эти два анимированных заголовка сделать кликабельными ссылками?

Question

[Respect and good to all]

Заголовок №1:

HTML

<ul class="animate-ul">
  <li>T</li>
  <li>I</li>
  <li>T</li>
  <li>L</li>
  <li>E</li>
</ul>

CSS

.animate-ul{position: relative;margin-top: 70px;left: 50%;display: flex;transform: translate(-50%,-50%);}
.animate-ul li{list-style:none;letter-spacing:15px;font-size:5em;font-family:fantasy;color:#484848;animation:ani 1.2s linear infinite}
.animate-ul li:nth-child(1){animation-delay:.2s}
.animate-ul li:nth-child(2){animation-delay:.6s}
.animate-ul li:nth-child(3){animation-delay:.8s}
.animate-ul li:nth-child(4){animation-delay:1s}
.animate-ul li:nth-child(5){animation-delay:1.4s}
.animate-ul li:nth-child(6){animation-delay:1.8s}
.animate-ul li:nth-child(7){animation-delay:1.12s}
@keyframes ani {
0%{color:#44848;text-shadow:none}
90%{color:#44848;text-shadow:none}
100%{color:#fff900;text-shadow:0 0 7px #fff900,0 0 70px #fff123}
}

Заголовок №2:

HTML

<svg>
  <filter id="displacementFilter">
    <feTurbulence type="turbulence" baseFrequency="0.04" numOctaves="2" result="turbulence"></feTurbulence>
    <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="6" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap>
  </filter>
</svg>
<div class="two">
<p class="svg-p">Вот так вот</p>
</div>

CSS

@import "https://fonts.googleapis.com/css?family=Hammersmith+One";
svg{display:none}
.svg-p{font-size:80px;-webkit-text-stroke:2px #000;font-family:FredokaOne-Regular;color:#A6540D;text-align:center;margin:0}
.two{filter:url(#displacementFilter);padding:20px 40px;background-image:linear-gradient(73deg,#FFAB00 20%,#FFAB00 43%,#FFD740 43%,#FFD740 93%);border:3px solid #000;box-shadow:1px 3px 3px 1px rgba(0,0,0,0.45),inset 0 -3px 0 0 #000000,inset 2px 6px 0 0 #FFD740,inset -7px -3px 0 0 #FFAD07;border-radius:20px}

Answer 1

[Максим]

Можно обернуть в тег a сам ul
Можно на js повесить click на ul
смотря что вам религия позволяет ...

Comments

[Respect and good to all]

А можно нагляднее про первый вариант? Без джава скрипта который

[Максим]

Артем Скоробогатый, я на автобусной остановке уже, просто поместите ваш ul между a и укажите href

[Respect and good to all]

Максим Ленский, Я дико извиняюсь за задолбайство! Во втором примере я обернул в теги А, но активными при наведении становятся только слова, а как сделать так что-бы при наведении на любую поверхность прямоугольника в который вписаны слова он становился ссылкой?

<svg>

  <filter id="displacementFilter">
    <feTurbulence type="turbulence" baseFrequency="0.04" numOctaves="2" result="turbulence"></feTurbulence>
    <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="6" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap>
  </filter>
 
</svg>
<div class="two">
         <a href="http://xn--80ackxdj0agc6azfp.xn--p1ai/"
 class="svg-p">Все выступления наших артистов
</a>
</div>

Если я пытаюсь обернуть в других разных местах HTML кода, то дизайн прямоугольника портится...

[Максим]

Артем Скоробогатый, я вечером буду дома, помогу, так как с телефона это делать сложно

[WapSter]

Артем Скоробогатый,

Если я пытаюсь обернуть в других разных местах HTML кода, то дизайн прямоугольника портится...

, задайте ссылке этой display: block. А вообще лучше бы вы на песочнице представили код.

[Алексей]

Артем Скоробогатый,

<a href="#">
<div class="two">
<p class="svg-p">Вот так вот</p>
</div>
</a>

[Respect and good to all]

Тимур Турсунбаев,

лучше бы вы на песочнице представили код.

А это как и где?

[Максим]

Артем Скоробогатый, jsfiddle.net codepen.io - это песочницы для кода

[Respect and good to all]

Алексей, Спасибо, работает!!