Aller au contenu principal
Partagez cette démonstration :

Bouton effet brillance CSS (Light Shine Effect)

Dernière mise à jour : novembre 2022

Le code :


 
<button>

</button>
 




*,*::before,*::after{box-sizing: border-box;}


button{


all:unset;
cursor:pointer;
overflow:hidden;
position: relative;
background-color: #6753ea;
border-radius: 9999px;
padding:15px 40px;
transition: box-shadow .4s;
color: white; 
font-size: 2rem;

	}
	

button:hover{

box-shadow:0 0 40px #6753ea;

}
     
	 
button::before {
	
content: '';
position: absolute;
background:linear-gradient(90deg,transparent,rgba(255, 255, 255, 0.8),transparent);
top: 0; 
left: 0; 
right: 0; 
bottom: 0;
transition: transform 1s ease-in-out;
transform:translateX(-100%)
	
	}
    

button:hover::before {
	
transform: translateX(100%)

	
	}




Vous rencontrez un problème avec cette démonstration ?

Vous avez constaté un oubli ou une erreur dans le code ? N'hésitez pas à me le signaler par mail (contact@guyom-design.com). Vous ne parvenez pas à faire fonctionner la démonstration ? Vous pouvez également me contacter et je vous aiderai si je le peux.