Nesse código eu uso apenas HTML e CSS.
Por algum motivo, quando eu tiro o cursor de cima do Instagram, ele pisca, ao invés de ter o efeito de transição e voltar a cor padrão. Alguém sabe outro código de HTML, CSS ou JavaScript que poderia resolver o meu problema? É um erro pouco perceptível mas sempre gosto de fazer as coisas da melhor maneira. Sou iniciante e não tenho muito conhecimento, se alguém puder me ajudar ficaria muito agradecido!
Eu coloquei outros exemplos no código.
Eu substituí a imagem do Instagram por um texto para o código não ficar tão grande
/* CSS */
* {
text-decoration: none;
cursor: default;
}
/* Instagram */
#insta:hover {
background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
background-clip: padding-box;
-webkit-background-clip: text;
color: transparent;
}
/* Twitter */
#twitter:hover {
color: #1DA1F2;
}
/* WhatsApp */
#wpp:hover {
color: #25D366;
}
/* Discord */
#discord:hover {
color: rgb(114,137,218);
}
li {
font-size: 70px;
list-style: none;
}
i {
transition: .28s;
color: black;
}
<!-- HTML -->
<li><i id="insta">Instagram</i></li>
<li><i id="twitter">Twitter</i></li>
<li><i id="discord">Discord</i></li>
<li><i id="wpp">WhatsApp</i></li>