پیشنمایش زنده
کد HTML
<button class="Just_Dance_Button">
<div class="Just_Dance_Button_IMG">
<div class="Just_Dance_Button_IMG_Arrow"></div>
<div class="Just_Dance_Button_IMG_Button"></div>
</div>
<div class="Just_Dance_Button_Title">
<p>DANCE NOW</p>
</div>
</button>
کد CSS
.Just_Dance_Button {
width: 15em;
height: 15em;
padding: 0.75em;
border: 0.15em solid rgb(255, 255, 255, 0.255);
background-color: transparent;
--backgroundcolor: #1d3844;
position: relative;
z-index: 0;
transition: all 0.05s ease-in-out;
}
.Just_Dance_Button:hover {
transform: rotate(-15deg);
border: solid 0.15em rgb(255, 255, 255, 0.255);
}
.Just_Dance_Button:active {
transform: rotate(-15deg) scale(0.95);
}
.Just_Dance_Button_IMG {
width: 100%;
height: 100%;
background-color: rgb(47, 158, 154);
box-shadow: 0em -1.5em 2.5em -1em rgba(0, 255, 255, 0.5);
display: flex;
align-items: flex-end;
justify-content: end;
position: relative;
z-index: 1;
border-top: 0.15em solid rgb(255, 255, 255, 0.5);
border-left: 0.15em solid rgb(255, 255, 255, 0.255);
}
.Just_Dance_Button:hover .Just_Dance_Button_IMG {
animation: borderlight 1s infinite linear;
box-shadow: 0em -1.5em 3em 0em rgba(0, 255, 255, 0.5);
}
.Just_Dance_Button:active .Just_Dance_Button_IMG {
filter: brightness(120%);
box-shadow: 0em -2.5em 4em 0em rgba(0, 255, 255, 0.5);
}
.Just_Dance_Button:active .Just_Dance_Button_Title p {
text-shadow: 0em 0em 1em white;
}
@keyframes borderlight {
0% {
border: 0.15em solid rgb(255, 255, 255, 0.255);
border-top: 0.15em solid white;
}
25% {
border: 0.15em solid rgb(255, 255, 255, 0.255);
border-right: 0.15em solid white;
}
50% {
border: 0.15em solid rgb(255, 255, 255, 0.255);
border-bottom: 0.15em solid white;
}
75% {
border: 0.15em solid rgb(255, 255, 255, 0.255);
border-left: 0.15em solid white;
}
100% {
border: 0.15em solid rgb(255, 255, 255, 0.255);
border-top: 0.15em solid white;
}
}
.Just_Dance_Button_IMG_Button {
width: 7.5em;
height: 2.5em;
background-color: var(--backgroundcolor);
clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 0% 100%);
display: flex;
justify-content: flex-end;
align-items: flex-end;
position: relative;
z-index: 2;
}
.Just_Dance_Button:hover .Just_Dance_Button_IMG_Button {
opacity: 0%;
}
.Just_Dance_Button_IMG_Arrow {
width: 1.5em;
height: 1.5em;
background-color: white;
clip-path: polygon(0% 0%, 100% 50%, 100% 50%, 0% 100%);
position: absolute;
z-index: 3;
transition: all 0.25s ease-in-out;
}
.Just_Dance_Button:hover .Just_Dance_Button_IMG_Arrow {
top: 55%;
left: 65%;
transform: scale(2.5) translate(-50%, -50%) rotate(15deg);
}
.Just_Dance_Button_Title {
width: 20em;
height: 5em;
background-color: var(--backgroundcolor);
position: absolute;
z-index: 6;
bottom: -5em;
left: -4em;
opacity: 0%;
transition: all 0.15s ease-in-out;
display: flex;
justify-content: center;
}
.Just_Dance_Button_Title p {
color: white;
font-size: 2.5em;
font-weight: bold;
}
.Just_Dance_Button:hover .Just_Dance_Button_Title {
bottom: -2.5em;
transform: rotate(15deg);
display: flex;
opacity: 100%;
box-shadow: 0em -1em 1em -1em white;
}