blurred in text link

<!--- cr viliarreai if used/reposted --->


<style>

a.one:link, a.one:visited {
text-shadow: -1px 0 #D6BDFF, 0 1px #D6BDFF, 1px 0 #D6BDFF, 0 -1px #D6BDFF, 0 0; /* change the first text shadow here */
 font-size:25px;
 font-weight:bold;
 color:#F5F0FF; /* change the first text color here */
 text-align: left;
text-decoration: none;
}

a.two:link,a.two:visited {
text-shadow: -1px 0 #D6BDFF, 0 1px #D6BDFF, 1px 0 #D6BDFF, 0 -1px #D6BDFF, 0 0; /* change the second text shadow here */
 font-size:25px;
 font-weight:bold;
 color:#fff; /* change the second text color here */
 text-align: left;
text-decoration: none;
}


a.one:hover, a.one:active {
transition: 0.5s; /* how fast/slow the transition will be */
webkit-filter: blur(1px); /* you can change the blur amount here */
filter: blur(1px);
}

a.two:hover, a.two:active {
transition: 0.5s; /* how fast/slow the transition will be */
webkit-filter: blur(1px); /* you can change the blur amount here */
filter: blur(1px);
}

</style>

<!--- change ur links here, one is the first text and two is the second text --->

<a class="one" href="#h">❥</a>
<a class="two" href="#etc"> I.</a>
<a class="two" href="#lol"> II.</a>


<!---use https://www.w3schools.com/ to edit and see your text--->