181 lines
3.3 KiB
CSS
181 lines
3.3 KiB
CSS
|
|
|
|
|
|
|
|
|
|
button {
|
|
position: relative;
|
|
padding: 12px 35px;
|
|
background: var(--color);
|
|
font-size: 17px;
|
|
font-weight: 500;
|
|
color: #181818;
|
|
border: 3px solid var(--color);
|
|
border-radius: 8px;
|
|
box-shadow: 0 0 0 #fec1958c;
|
|
transition: all .3s ease-in-out;
|
|
cursor: pointer;
|
|
background: #ff6347;
|
|
}
|
|
|
|
.dollar-1, .dollar-2, .dollar-3, .dollar-4, .dollar-5, .dollar-6 {
|
|
position: absolute;
|
|
width: 25px;
|
|
height: auto;
|
|
filter: drop-shadow(0 0 0 #fffdef);
|
|
z-index: -5;
|
|
transition: all 1s cubic-bezier(0.05, 0.83, 0.43, 0.96);
|
|
color: #00FF00;
|
|
}
|
|
|
|
.dollar-1 {
|
|
top: 20%;
|
|
left: 20%;
|
|
}
|
|
|
|
.dollar-2 {
|
|
top: 45%;
|
|
left: 45%;
|
|
width: 15px;
|
|
transition: all 1s cubic-bezier(0, 0.4, 0, 1.01);
|
|
}
|
|
|
|
.dollar-3 {
|
|
top: 40%;
|
|
left: 40%;
|
|
width: 5px;
|
|
transition: all 1s cubic-bezier(0, 0.4, 0, 1.01);
|
|
}
|
|
|
|
.dollar-4 {
|
|
top: 20%;
|
|
left: 40%;
|
|
width: 8px;
|
|
transition: all .8s cubic-bezier(0, 0.4, 0, 1.01);
|
|
}
|
|
|
|
.dollar-5 {
|
|
top: 25%;
|
|
left: 45%;
|
|
width: 15px;
|
|
transition: all .6s cubic-bezier(0, 0.4, 0, 1.01);
|
|
}
|
|
|
|
.dollar-6 {
|
|
top: 5%;
|
|
left: 50%;
|
|
width: 5px;
|
|
transition: all .8s ease;
|
|
}
|
|
|
|
button:hover {
|
|
background: transparent;
|
|
color: var(--color);
|
|
box-shadow: 0 0 25px #fec1958c;
|
|
background: #ff0000;
|
|
}
|
|
|
|
button:hover .dollar-1 {
|
|
top: -80%;
|
|
left: -30%;
|
|
filter: drop-shadow(0 0 10px #fffdef);
|
|
z-index: 2;
|
|
}
|
|
|
|
button:hover .dollar-2 {
|
|
top: -25%;
|
|
left: 10%;
|
|
filter: drop-shadow(0 0 10px #fffdef);
|
|
z-index: 2;
|
|
}
|
|
|
|
button:hover .dollar-3 {
|
|
top: 55%;
|
|
left: 25%;
|
|
filter: drop-shadow(0 0 10px #fffdef);
|
|
z-index: 2;
|
|
}
|
|
|
|
button:hover .dollar-4 {
|
|
top: 30%;
|
|
left: 80%;
|
|
filter: drop-shadow(0 0 10px #fffdef);
|
|
z-index: 2;
|
|
}
|
|
|
|
button:hover .dollar-5 {
|
|
top: 25%;
|
|
left: 115%;
|
|
filter: drop-shadow(0 0 10px #fffdef);
|
|
z-index: 2;
|
|
}
|
|
|
|
button:hover .dollar-6 {
|
|
top: 5%;
|
|
left: 60%;
|
|
filter: drop-shadow(0 0 10px #fffdef);
|
|
z-index: 2;
|
|
}
|
|
|
|
.fil0 {
|
|
fill: #00FF00;
|
|
}
|
|
|
|
#source-link {
|
|
top: 120px;
|
|
}
|
|
|
|
#source-link>i {
|
|
color: rgb(94, 106, 210);
|
|
}
|
|
|
|
#yt-link {
|
|
top: 65px;
|
|
}
|
|
|
|
#yt-link>i {
|
|
color: rgb(219, 31, 106);
|
|
}
|
|
|
|
#Fund-link {
|
|
top: 10px;
|
|
}
|
|
|
|
#Fund-link>i {
|
|
color: rgb(255, 251, 0);
|
|
}
|
|
|
|
.meta-link {
|
|
align-items: center;
|
|
backdrop-filter: blur(3px);
|
|
background-color: rgba(255, 255, 255, 0.05);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
border-radius: 6px;
|
|
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
|
|
cursor: pointer;
|
|
display: inline-flex;
|
|
gap: 5px;
|
|
left: 10px;
|
|
padding: 10px 20px;
|
|
position: fixed;
|
|
text-decoration: none;
|
|
transition: background-color 600ms, border-color 600ms;
|
|
z-index: 10000;
|
|
}
|
|
|
|
.meta-link:hover {
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
.meta-link>i,
|
|
.meta-link>span {
|
|
height: 20px;
|
|
line-height: 20px;
|
|
}
|
|
|
|
.meta-link>span {
|
|
color: white;
|
|
font-family: "Rubik", sans-serif;
|
|
transition: color 600ms;
|
|
} |