[menu & misc] girly.uwu.ai button, cr @itzhuo

cr @itzhuo

by naocrrds

HTML

<!---girly.uwu.ai buttons pro standard version. cr to itzho on twt are appreciated--->
<link rel="preconnect" href="https://fonts.googleapis.com/">
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Rammetto+One&amp;display=swap" rel="stylesheet">
</head>

<style>

mark { 
border:1px solid black;
box-shadow: 0px 0px 2px #000;
text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;
color:white; /* color font */
background-color: #F8E0F7;
border-radius: 100px;
background: linear-gradient(180deg, rgba(248,117,170,1) 0%, rgba(0,0,0,1) 100%); /* change this if you want */
padding-left:10px;
padding-right:10px;
font-family: 'Rammetto One', cursive;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
margin:auto;
cursor: pointer; /* you can change this to hidden or pointer */

}

a {
font-family: 'Rammetto One', cursive;
text-decoration: none;
color: white;
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;

} 
a:hover {
webkit-filter: blur(1px);
filter: blur(1px);
letter-spacing:1.5px;
color:white;
transition:.3s;
text-decoration: none;
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;
}

a { letter-spacing:normal; transition:.3s;}
.poop {
-webkit-transform: rotateZ(350deg);
transform: rotateZ(350deg);
z-index:222222;
animation: pop 1s infinite;
-webkit-animation: pop 1s infinite;

}
@keyframes pop {
from {
transform:scale(0.90)
}
50% {
transform:scale(1.01)
}
to {
transform:scale(0.90)
}
}
@-webkit-keyframes pop {
from {
-webkit-transform:scale(0.95)
}
50% {
-webkit-transform:scale(1)
}
to {
-webkit-transform:scale(0.95)
}
}

</style>

<div id="hover"><mark><a href="URL">Title</a></mark> <mark><a href="URL">Title</a></mark> <mark><a href="URL">Title</a></mark></div>

<!--- you can add more buttons just between mark & mark--->