Dernière mise à jour : novembre 2022
<button class="neon-box-1">Survolez-moi</button>
<button class="neon-box-2">Survolez-moi</button>
<button class="neon-box-3">Survolez-moi</button>
<button class="neon-drop-1">Survolez-moi</button>
<button class="neon-drop-2">Survolez-moi</button>
<button class="neon-drop-3">Survolez-moi</button>
*,*::before,*::after{box-sizing: border-box;}
button{
all:unset;
cursor:pointer;
display: flex;
justify-content: center;
align-items: center;
border-radius:4px;
text-transform: uppercase;
font-size: 1.25rem;
padding: 10px 20px;
margin:1rem;
}
/******************BOX-SHADOW**************************/
.neon-box-1{
background:linear-gradient(to right, #0ff 0%,50%,#f0f 100%);
}
.neon-box-1:hover{
animation: neon-box-1 2s infinite alternate linear
}
@keyframes neon-box-1{
from{
box-shadow:2px 0 6px rgba(255, 0, 255, 0.7),-2px 0 6px rgba(0, 255, 255, 0.7),5px 0 10px rgba(255, 0, 255, 0.7),-5px 0 10px rgba(0, 255, 255, 0.7)
}
to{
box-shadow:10px 0 20px rgba(255, 0, 255, 0.7),-10px 0 20px rgba(0, 255, 255, 0.7),15px 0 30px rgba(255, 0, 255, 0.7),-15px 0 30px rgba(0, 255, 255, 0.7)
}
}
.neon-box-2 {
background:linear-gradient(to right, rgba(235, 66, 46, 1) 0%,50%, rgba(255, 197, 0, 1) 100%);
}
.neon-box-2:hover{
animation: neon-box-2 2s infinite alternate linear ;
}
@keyframes neon-box-2{
from{
box-shadow:2px 0 6px rgba(255, 197, 0, 0.7),-2px 0 6px rgba(235, 66, 46, 0.7),5px 0 10px rgba(255, 197, 0, 0.7),-5px 0 10px rgba(235, 66, 46, 0.7)
}
to{
box-shadow:10px 0 20px rgba(255, 197, 0, 0.7),-10px 0 20px rgba(235, 66, 46, 0.7),15px 0 30px rgba(255, 197, 0, 0.7),-15px 0 30px rgba(235, 66, 46, 0.7)
}
}
.neon-box-3 {
background:linear-gradient(to right, #64f38c 0%,50%,#f79d00 100%);
}
.neon-box-3:hover{
animation: neon-box-3 2s infinite alternate linear
}
@keyframes neon-box-3{
from{
box-shadow:2px 0 6px rgba(247, 157, 0, 0.7),-2px 0 6px rgba(100, 243, 140, 0.7),5px 0 10px rgba(247, 157, 0, 0.7),-5px 0 10px rgba(100, 243, 140, 0.7)
}
to{
box-shadow:10px 0 20px rgba(247, 157, 0, 0.7),-10px 0 20px rgba(100, 243, 140, 0.7),20px 0 40px rgba(247, 157, 0, 0.7),-20px 0 40px rgba(100, 243, 140, 0.7)
}
}
/***************DROP-SHADOW******************/
.neon-drop-1 {
background:linear-gradient(to right, #0ff 0%,50%,#f0f 100%);
}
.neon-drop-2 {
background:linear-gradient(to right, #eb422e 0%,50%, #ffc500 100%);
}
.neon-drop-3 {
background:linear-gradient(to right, #64f38c 0%,50%,#f79d00 100%);
}
.neon-drop-1::after,
.neon-drop-2::after,
.neon-drop-3::after {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.neon-drop-1:hover::after,
.neon-drop-2:hover::after,
.neon-drop-3:hover::after{
background: inherit;
filter: blur(10px);
animation: neon-drop 2s infinite alternate linear
}
@keyframes neon-drop{
from{
transform:scalex(1) scaleY(1.09);
}
to{
transform:scalex(1.15) scaleY(1.25);
}
}