♥ ⇢ ˗ˏˋ hover heart menu ࿐ྂ

Tags: menu, heart, cute, code, hover

Description:

stole this code from this neocities resource site !!! adjusted the colors so it would be easier to edit!!! if you want a better real-time example, i have it on my profile!

each side of the heart is labelled in the code to make it easier for you <3

example ;;

hello person! this is what it looks like in real time :)

right side

im glad youre using this!!

if you'd like more resources then here is ;;

my resources masterlist!!!

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by zyozi (https://layouts.spacehey.com/layout?id=37919) -->

<div id="ta1"><div id="starred"></div><center>
 
<div style="width:200px; border:1px dashed #457bd1; padding:8px; font-size:12px;">left side &lt;3</div><br/>

<p>hello person!</p>
 
<br/></center></div>
 
 
<div id="ta2"><div id="starred"></div><center>
 
<div style=" width:200px; border:1px dashed #457bd1; padding:8px; font-size:13px;">right side</div><br/>
 
<p>im glad youre using this</p>
 
<br/></center></div>


<style>

/*heart hover thingie :D*/

/*left side!!!*/
#ta1 {
font-size:14px;
font-family: Kosugi;
color: #d9d9d9;
line-height:15px;
background:#457bd1;
width: 40px; height: 70px;
border-radius: 50px 50px 0px 0px;
border: 1px solid #457bd1;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
position:absolute;
overflow:hidden;
top:20px; left:32px;
-webkit-transition: all 0.8s ease-in-out;
z-index:999999;
}
 
#ta1:hover{
background:#0f0f0f;
width:250px; height:350px;
border-radius:5px;
border:1px solid #fff;
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
z-index:9999999;
}

/*dont edit unless ur changing the size of the heart*/
#starred{
padding-top:60px;
}

/*right side!!!*/
#ta2 {
font-size:14px;
font-family: Kosugi;
color: #d9d9d9;
line-height:15px;
background:#457bd1;
border-radius: 50px 50px 0px 0px;
border: 1px solid #457bd1;
width: 40px; height: 70px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
position:absolute;
overflow:hidden;
top:20px; left:54px;
-webkit-transition: all 0.8s ease-in-out;
z-index:99999;}
 
#ta2:hover{
background:#0f0f0f;
width:250px; height:350px;
border-radius:5px;
border:1px solid #fff;
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
z-index:9999999;
}

</style>

Copy and paste this code into the "About me" section of your Profile to use it.

Caution: This Layout was not inspected by SpaceHey — use it at your own risk.

Comments

Displaying 12 of 12 comments ( View all | Add Comment )

raki	1732654192 USING!! i love it!!!! Report Comment
⨯ ﹕ HINGE .ᐟ SANS ﹒(ᐢᗜᐢ)	1728473087 using^^ Report Comment
Ross :3	1722342915 UZING !! XP Report Comment
vincenzo (WIP)	1720981313 using Report Comment
ıllıllı 🇧‌🇺‌🇬‌ / 🇹‌๑🇧‌🇾‌ ıllıllı [AUTOPLAY]	1720658244 USINGGG Report Comment
ChromaMuse	1708426243 HII!! quick question thats probs a bit dum but how do i change the text? like when i look at the code all i can find is the begging/title of the example Report Comment https://pastebin.com/tCWSpCkY ive marked the normal text you can change on this pastebin by zyozi; 1709086419; Report tysm!! by ChromaMuse; 1709136139; Report
❀˖° jack	1701309966 usinggg Report Comment
ELISSA ^_^	1691848174 USING!! Report Comment
finn	1691610903 USING TYSM Report Comment