Un Outline qui n'est pas un outline ……

Par Mylan Hachemane, il y a 1 an

Les bases HTML/CSS
Javascript React

Bonjour,

Je code actuelement un site en React et je rencontre un probleme avec la conception d'un bouton.
Quand je passe la souris dessus, il y a une sorte de outline qui s'affiche or dans monde code (meme dans le reset.css) j'ai mis "outline:none". Quelqu'un pourrait m'aider ? je suis desespérer 😭😭
Voici mon code :

import styled from 'styled-components'; function MainDiv() { const PlayButton2 = styled.button` position: relative; top: 20vh; background: linear-gradient(145deg, #f26425, #f78a48); color: white; height: 10vh; width: clamp(150px, 15vw, 250px); border: 4px solid #051d36; border-radius: 40px; font-size: clamp(1.2rem, 2vw, 1.8rem); font-weight: bold; font-family: 'Fredoka', sans-serif; cursor: pointer; box-shadow: 6px 6px 0 #051d36; transition: all 0.2s ease-in-out; &:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 #051d36; background: linear-gradient(145deg, #f78a48, #f26425); } &:active { transform: translate(1px, 1px); box-shadow: 3px 3px 0 #051d36; } `; return ( <> <PlayButton2>JOUER</PlayButton2> </> ); } export default MainDiv;

1 réponse

Mylan Hachemane, il y a 1 an

Salut,
Déjà merci de ta réponse. J'ai essayé, j'ai défilé l'onglet styles et j'ai remarqué qu'il y avait un autre hover et qui appliqué un border-color 😅 (je me sens un peu bete).
Merci beaucoup.