Encontrei no codepen de Hugo Baeta esse estilo de botão que possui um efeito hover (ao passar o ponteiro do mouse sobre ele) muito fofo, aparecem corações que ficam se movendo. É bem bonitinho!
Uso como menu das redes sociais ali na sidebar e compartilho com vcs os códigos. Em um gadget html/javascript ou em alguma área do seu blog que aceite html, cole o código abaixo:
<style>
button {
position: relative;
overflow: hidden;
background: rgb(255,188,237);
background: radial-gradient(circle, rgba(255,188,237,1) 0%, rgba(252,179,233,1) 35%, rgba(255,234,249,1) 100%);
border-radius: 11px;
border: none;
outline: none;
font-family: grand hotel;
padding: 11px;
margin: 5px auto;
font-size: 1.25em;
font-weight: 500;
letter-spacing: 0.035em;
color: white;
display: inline-block;
width: 200px;
}
button:hover {
width:200px;
cursor: pointer;
}
button:hover::before, button:hover::after {
opacity: 1;
transition: opacity .25s ease-in-out;
}
button:hover::before {
transition-delay: .1s;
}
button::before, button::after {
content: "";
color: pink;
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity .25s ease-in-out;
}
button::before {
content: "click me!";
z-index: 3;
padding: inherit;
text-align: center;
text-shadow: 2px 2px 10px #fee, -2px -2px 10px #fee, 4px 4px 10px #fee, -4px -4px 10px #fee, 6px 6px 10px #fee, -6px -6px 10px #fee, 8px 68px 15px #fee, -8px -8px 15px #fee;
}
button::after {
z-index: 2;
height: 100000vh;
background: radial-gradient(circle closest-side at 60% 43%, #fee 26%, transparent 27%), radial-gradient(circle closest-side at 40% 43%, #fee 26%, transparent 27%), radial-gradient(circle closest-side at 40% 22%, pink 45%, transparent 46%), radial-gradient(circle closest-side at 60% 22%, pink 45%, transparent 46%), radial-gradient(circle closest-side at 50% 35%, pink 30%, transparent 31%), radial-gradient(circle closest-side at 60% 43%, #fee 26%, transparent 27%) 20px 20px, radial-gradient(circle closest-side at 40% 43%, #fee 26%, transparent 27%) 20px 20px, radial-gradient(circle closest-side at 40% 22%, pink 45%, transparent 46%) 20px 20px, radial-gradient(circle closest-side at 60% 22%, pink 45%, transparent 46%) 20px 20px, radial-gradient(circle closest-side at 50% 35%, pink 30%, transparent 31%) 20px 20px;
background-color: #fee;
background-size: 40px 40px;
-webkit-animation: hearts-move 300s linear infinite;
animation: hearts-move 300s linear infinite;
transition-delay: .1s;
}
@-webkit-keyframes hearts-move {
from {
-webkit-transform: translateY(0);
transform: translateY(0);
}
to {
-webkit-transform: translateY(-1000vh);
transform: translateY(-1000vh);
}
}
@keyframes hearts-move {
from {
-webkit-transform: translateY(0);
transform: translateY(0);
}
to {
-webkit-transform: translateY(-1000vh);
transform: translateY(-1000vh);
}
}
</style>
<center>
<a href='#'><button>NOME-DO-LINK</button></a>
<a href='#'><button>NOME-DO-LINK</button></a>
<a href='#'><button>NOME-DO-LINK</button></a>
</center>
☆Para personalizar, mudei só as cores e removi bordas do código original; o nome button pode ser substituído por outro de sua preferência, caso queira renomear a class para diferenciar de menus ou botões que talvez vc esteja usando.
☆☆A cor do plano de fundo que aparece normal pode ser alterada em background: rgb(255,188,237); background: radial-gradient(circle, rgba(255,188,237,1) 0%, rgba(252,179,233,1) 35%, rgba(255,234,249,1) 100%); <= que é uma cor em degradê ou gradiente e você pode gerar outras cores nesse site aqui.
☆☆☆border e border-radius definem bordas ou as deixam arredondadas; font-family ou font-size servem para mudar o tipo e tamanho da fonte; width: 200px é a largura do botão.
☆☆☆☆color: pink; é a cor do texto click me!, o qual pode ser alterado; text-shadow é a sombra desse texto com a cor #fee, que pode mudar também.
☆☆☆☆☆E finalmente, a cor do plano de fundo em hover é #fcc e a dos corações, pink; você as encontrará no trecho background: radial-gradient(circle.... e background-color: #fee;
Substitua as '#' de <a href='#'> por endereços de links e NOME-DO-LINK, pelo nome do link 😔...
O resultado é assim:
☆☆A cor do plano de fundo que aparece normal pode ser alterada em background: rgb(255,188,237); background: radial-gradient(circle, rgba(255,188,237,1) 0%, rgba(252,179,233,1) 35%, rgba(255,234,249,1) 100%); <= que é uma cor em degradê ou gradiente e você pode gerar outras cores nesse site aqui.
☆☆☆border e border-radius definem bordas ou as deixam arredondadas; font-family ou font-size servem para mudar o tipo e tamanho da fonte; width: 200px é a largura do botão.
☆☆☆☆color: pink; é a cor do texto click me!, o qual pode ser alterado; text-shadow é a sombra desse texto com a cor #fee, que pode mudar também.
☆☆☆☆☆E finalmente, a cor do plano de fundo em hover é #fcc e a dos corações, pink; você as encontrará no trecho background: radial-gradient(circle.... e background-color: #fee;
Substitua as '#' de <a href='#'> por endereços de links e NOME-DO-LINK, pelo nome do link 😔...
O resultado é assim:
ヾ(＾∇＾) ☆
 muito fo...){kind=link}
4 Comments
bem fofo o efeito <3
ResponderExcluirhttps://3.bp.blogspot.com/-d1PZNAoifZ0/WjQgwTUZnYI/AAAAAAAARjU/EDKy3XCmk8YX0gbMGiAYhYeOBtKuCm2WACPcBGAYYCw/s1600/emoticon4.gif
ExcluirQue fofo! Roberta, vc pode fazer uma postagem sobre seus códigos favoritos do codepen? Ou os códigos mais úteis. Já vi o codepen umas vezes mas muitas vezes não encontro o que quero, aí vejo no seu blog essas coisas fofinhas que vc acha no copepen, mas como é que vc acha tanta coisa fofinha ?
ResponderExcluirGeralmente eu acho por acaso :D As vezes procuro por alguma coisa e encontro outras, daí tento personalizar para ficar mais pro lado fofo, porque a maior parte dos códigos é para combinar com todos os gostos ou mais básica.
ExcluirGosto de procurar por coisas feitas com css, para mim, é mais fácil entender.
Mas vou guardar sua sugestão e separar alguns favoritos lá do site.https://4.bp.blogspot.com/-NhUnhRtzpLw/WjQgwFY4rJI/AAAAAAAARjU/DN_ma1_1fpwRXQcOYYjJ3ncOYiuleRKtwCPcBGAYYCw/s1600/emoticon2.gif
Muito obrigada por seu comentário e por sua presença! Ambos são super importantes para mim.
Apenas peço que:
- Comente a vontade, dê sua opinião, faça críticas, esclareça suas dúvidas e dê suas sugestões sobre o assunto referente às postagens;
- Use um vocabulário livre para todas as idades;
- Não ofenda ninguém em hipótese alguma.
Os comentários são moderados e não são permitidos comentários de pessoas que não se identifiquem. Algumas dúvidas podem ser previamente esclarecidas na F.A.Q, assim como créditos e outras coisas.
Por favor, entrem em contato por meio das redes sociais também para dúvidas, sugestões, pedidos ou outros:
Facebook - Twitter - Deviantart