Efeitos para botão
Botão 3d
.elementor-button {
border-top-left-radius: 20px 100% !important;
border-bottom-left-radius: 20px 100% !important;
border-top-right-radius: 20px 100% !important;
border-bottom-right-radius: 20px 100% !important;
box-shadow: inset 0px 0px 5px 5px #ffffff25, 0px 5px 0px 0px #906A0B !important;
background: linear-gradient(45deg, #AC893C, #AC893C, #AC893C, #DDB263, #AC893C, #AC893C);
background-size: 200% 200%;
animation: shine 5s ease-in-out infinite;
transform-origin: center;
}
@keyframes shine {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
Botão Pulsando
#botaum {
-webkit-animation: pulse 0.8s infinite;
}
.pulse-button:hover {
-webkit-animation: none;
}
Botão Flutuando
Obs.: Para usar esse efeito, você precisa adicionar o ID “flutuar” no botão.
#flutuar{
transform: translateY(0px);
animation: float 6s ease-in-out infinite;
}
@keyframes float{
0%{
transform: translatey(0px);
}
50%{
transform: translatey(-20px);
}
100%{
transform: translateY(0px);
}
}
Sombra pulsando
Obs.: Para usar esse efeito, você precisa adicionar o ID “sombra” no botão.
#sombra{
background: rgb(196,151,56);
background: linear-gradient(90deg, rgba(196,151,56,1) 35%, rgba(255,222,140,1) 100%);
border-radius:10px;
background-clip: text;
-webkit-background-clip: text;
}
#sombra{
animation: wave 2s linear infinite;
}
@keyframes wave {
0% {
box-shadow: 0 0 10px -15px #fef568;
}
80% {
box-shadow: 0 0 0 15px transparent;
}
100% {
box-shadow: 0 0 0 0 transparent;
}
}
Botão com brilho
Obs.: Para usar esse efeito, você precisa adicionar a Classe “brilho” no botão.
.brilho .elementor-button {
animation: 3.4s cubic-bezier(0.2, 0.5, 0.9, 0.6) 2s infinite brilho;
background-image: linear-gradient(45deg, #986348, #F6D972, #986348, #F6D972);
background-size: 400% 200%;
transition: background 5s ease, box-shadow 0.5s;
}
@keyframes brilho {
0% {
background-position: 0 0;
}
100% {
background-position: 100% 0;
}
}
.brilho .elementor-button:hover {
box-shadow: 0 0 15px 1px #F6D972;
transition: all .8s;
}
Bordas animadas
selector{
z-index: 1;
}
selector .elementor-button:after{
content: "";
border-radius: inherit;
background: linear-gradient(to bottom, #2B2B2B,#141414);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
z-index: -1;
width: 100%;
height: 100%;
transition: 0.5s;
}
@keyframes AnimationName {
0% {
background-position: 0%
}
50% {
background-position: 50%
}
100% {
background-position: 100%
}
}
selector .elementor-button:before{
content: "";
border-radius: inherit;
background: linear-gradient(20deg, #5CFFFC, transparent, #00FFAE,#5CFFFC, transparent, #00FFAE);
background-size: 1800%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
z-index: -2;
width: calc(100% + 5px);
height: calc(100% + 5px);
transition: 0.5s;
animation: AnimationName 5s linear infinite;
}
Borda expansível
Obs.: Para usar esse efeito, você precisa adicionar o ID “expandiu” no botão.
#expandiu{
border: 0 solid transparent;
border-radius: 5px;
box-shadow: inset 0 0 20px rgba(255, 255, 255, 0);
outline: 1px solid rgba(255, 255, 255, .5);
outline-offset: 0px;
text-shadow: none;
transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);
}
#expandiu:hover {
border-color: rgba(255, 255, 255, .5);
box-shadow: inset 0 0 20px rgba(255, 255, 255, .5), 0 0 20px rgba(255, 255, 255, .2);
outline-color: rgba(255, 255, 255, 0);
outline-offset: 20px; /* controla a distancia da borda*/
text-shadow: 1px 1px 2px #427388;
}
Cresce e balança
Obs.: Para usar esse efeito, você precisa adicionar o ID “giro” no botão.
#giro {
animation: wiggle 4s 2s infinite;
}
@keyframes wiggle {
5%,
50% {
transform: scale(1);
}
10% {
transform: scale(0.9);
}
15% {
transform: scale(1.15);
}
20% {
transform: scale(1.15) rotate(-5deg);
}
25% {
transform: scale(1.15) rotate(5deg);
}
30% {
transform: scale(1.15) rotate(-3deg);
}
35% {
transform: scale(1.15) rotate(2deg);
}
40% {
transform: scale(1.15) rotate(0);
}
}
Botão em html
Observação: Você precisa jogar essa estrutura com a Tag A no widget de html.
HTML:
<a href="Seu Link Aqui">
<button class="botao" aria-label="botão de ação">Esse é o efeito</button>
</a>
CSS:
.botao{
padding: 20px;
background: linear-gradient(135deg, #ff8c00, #ff4500);
color: #fff;
border-radius: 5px;
width: 100%;
max-width: 200px;
max-width: 200px;
box-sizing: border-box;
cursor: pointer;
transition: 0.4s ease-in-out;
display: inline-block;
}
.botao:hover{
color: #fff;
transform: scale(1.1);
}
titulo preenchendo
Observação: o botão nativo do Elementor deve ter fundo transparente e não pode ter nenhum efeito ativo no hover.
Você deve adicionar o ID “preencher” no botão
#preencher {
background: linear-gradient(to right, #4d4d4d 0 10%, white 100%);
background-position: 0;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: shine 9s infinite linear forwards;
-webkit-text-size-adjust: none;
text-decoration: none;
white-space: nowrap;
border: 1px solid #fff;
border-radius: 10px;
}
@keyframes shine {
0% {
background-position: 0;
}
60% {
background-position: 180px;
}
100% {
background-position: 280px;
}
}
Borda de ouro
Observação: o botão do elementor não pode ter nome e o fundo deve ser transparente.
Você deve usar o ID “Btn” no botão para o efeito funcionar
.Btn {
width: 140px;
height: 40px;
border: none;
padding: 30px 40px 30px 40px;
border-radius: 10px;
background: linear-gradient(to right,#77530a,#ffd277,#77530a,#77530a,#ffd277,#77530a);
background-size: 250%;
background-position: left;
color: #ffd277;
position: relative;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition-duration: 1s;
overflow: hidden;
}
.Btn::before {
position: absolute;
content: "Esse é o efeito";
color: #ffd277;
display: flex;
align-items: center;
justify-content: center;
width: 97%;
height: 90%;
border-radius: 8px;
transition-duration: 1s;
background-color: rgba(0, 0, 0, 0.842);
background-size: 200%;
}
.Btn:hover {
background-position: right;
transition-duration: 1s;
}
.Btn:hover::before {
background-position: right;
transition-duration: 1s;
}
.Btn:active {
transform: scale(0.95);
}
Flash de luz
Obs.: Para usar esse efeito, você precisa adicionar o ID “flash” no botão.
#flash{
border: 1px solid;
border-radius: 12px;
overflow: hidden;
transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
cursor: pointer;
}
#flash:after {
background: #fff;
content: "";
height: 150px;
left: -75px;
opacity: 0.5;
position: absolute;
top: -50px;
transform: rotate(35deg);
transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
width: 50px;
}
#flash:hover:after {
left: 120%;
}
Preenchimento horizontal
Obs.: Para usar esse efeito, você precisa adicionar o ID “lado” no botão.
#lado .elementor-button {
position: relative;
z-index: 1;
}
#lado .elementor-button::before {
content: '';
position: absolute;
background: red;
color: #FFFFFF; /* Alteração da cor do texto para branco */
border-radius: 5px;
width: 100%;
height: 100%;
top: 0;
left: 0;
transform: scaleX(0);
transform-origin: left; /*Mudar a direção aqui */
transition: transform 0.6s ease; /* Mudar a velocidade aqui */
}
/*Hover*/
#lado .elementor-button:hover::before {
transform: scaleX(1);
}
/*Texto do botão*/
#lado .elementor-button-text {
z-index: 2;
}
#lado .elementor-button:hover .elementor-button-text {
color: #fff !important; /* Adicionar a cor do texto aqui */
}
Lados cortados
Obs.: Para usar esse efeito, você precisa adicionar a classe “effect” no botão.
.effect .elementor-button {
padding: 20px;
background: linear-gradient(-45deg, #09e3a6, #b63beb, #1ae0fa);
animation: colorir 5s linear infinite;
background-size: 600%;
--path: 0 0, calc(100% - 14px) 0, 115% 100%, calc(100% - 20px) 100%, 14px 100%, 0 calc(100% - 14px);
clip-path: polygon(var(--path));
-webkit-clip-path: polygon(var(--path));
}
.effect .elementor-button:hover {
opacity: .5;
transition: .7s
}
@keyframes colorir {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
efeito Bolhas
Obs.: Para usar esse efeito, você precisa adicionar a classe “button” no botão. Também precisa deixar transparente a cor de fundo do botão, porque a cor é aplicada pelo código.
.button {
z-index: 1;
}
.button {
position: relative;
padding: 10px -20px 0px 0px;
border-radius: 6px;
border: none;
color: #fff;
cursor: pointer;
background-color: #7d2ae8;
transition: all 0.2s ease;
}
.button:active {
transform: scale(0.96);
}
.button:before,
.button:after {
position: absolute;
content: "";
width: 150%;
left: 50%;
height: 100%;
transform: translateX(-50%);
z-index: -1000;
background-repeat: no-repeat;
}
.button:hover:before {
top: -70%;
background-image: radial-gradient(circle, #7d2ae8 20%, transparent 20%),
radial-gradient(circle, transparent 20%, #7d2ae8 20%, transparent 30%),
radial-gradient(circle, #7d2ae8 20%, transparent 20%),
radial-gradient(circle, #7d2ae8 20%, transparent 20%),
radial-gradient(circle, transparent 10%, #7d2ae8 15%, transparent 20%),
radial-gradient(circle, #7d2ae8 20%, transparent 20%),
radial-gradient(circle, #7d2ae8 20%, transparent 20%),
radial-gradient(circle, #7d2ae8 20%, transparent 20%),
radial-gradient(circle, #7d2ae8 20%, transparent 20%);
background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%,
10% 10%, 18% 18%;
background-position: 50% 120%;
animation: greentopBubbles 0.6s ease;
}
@keyframes greentopBubbles {
0% {
background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%,
40% 90%, 55% 90%, 70% 90%;
}
50% {
background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%,
50% 50%, 65% 20%, 90% 30%;
}
100% {
background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%,
50% 40%, 65% 10%, 90% 20%;
background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
}
}
.button:hover::after {
bottom: -70%;
background-image: radial-gradient(circle, #7d2ae8 20%, transparent 20%),
radial-gradient(circle, #7d2ae8 20%, transparent 20%),
radial-gradient(circle, transparent 10%, #7d2ae8 15%, transparent 20%),
radial-gradient(circle, #7d2ae8 20%, transparent 20%),
radial-gradient(circle, #7d2ae8 20%, transparent 20%),
radial-gradient(circle, #7d2ae8 20%, transparent 20%),
radial-gradient(circle, #7d2ae8 20%, transparent 20%);
background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 20% 20%, 18% 18%;
background-position: 50% 0%;
animation: greenbottomBubbles 0.6s ease;
}
@keyframes greenbottomBubbles {
0% {
background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%,
70% -10%, 70% 0%;
}
50% {
background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%,
105% 0%;
}
100% {
background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%,
110% 10%;
background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
}
}
Enviar Mensagem
Obs.: Para usar esse efeito, basta copiar o código e colar dentro de um widget de html
<buttoon>
<div class="svg-wrapper-1">
<div class="svg-wrapper">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="24"
height="24"
>
<path fill="none" d="M0 0h24v24H0z"></path>
<path
fill="currentColor"
d="M1.946 9.315c-.522-.174-.527-.455.01-.634l19.087-6.362c.529-.176.832.12.684.638l-5.454 19.086c-.15.529-.455.547-.679.045L12 14l6-8-8 6-8.054-2.685z"
></path>
</svg>
</div>
</div>
<span>Esse é o efeito</span>
</buttoon>
<style>
buttoon {
font-family: inherit;
font-size: 1em;
background: royalblue;
color: white;
padding: 0.7em 1em;
padding-left: 0.9em;
display: flex;
align-items: center;
border: none;
border-radius: 16px;
overflow: hidden;
transition: all 0.4s ease-in-out; /* Aumentei a duração da transição para suavizar */
cursor: pointer;
min-height: 40px; /* Defina uma altura mínima para evitar diminuição excessiva */
}
buttoon:hover {
width: 50%;
height: 50px;
transform: translateX(2.5em);
}
buttoon span {
display: block;
margin-left: 0.5em;
transition: all 0.4s ease-in-out; /* Aumentei a duração da transição para suavizar */
}
buttoon svg {
display: block;
transform-origin: center center;
transition: transform 0.4s ease-in-out; /* Aumentei a duração da transição para suavizar */
}
buttoon:hover .svg-wrapper {
animation: fly-1 0.6s ease-in-out infinite alternate;
}
buttoon:hover svg {
transform: translateX(1em) rotate(45deg) scale(1.1);
}
buttoon:hover span {
transform: translateX(9em);
}
buttoon:active, button:focus{
outline: none !important;
border: none !important;
}
@keyframes fly-1 {
from {
transform: translateY(0.1em);
}
to {
transform: translateY(-0.1em);
}
}
</style>
<buttoon>
<div class="svg-wrapper-1">
<div class="svg-wrapper">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="24"
height="24"
>
<path fill="none" d="M0 0h24v24H0z"></path>
<path
fill="currentColor"
d="M1.946 9.315c-.522-.174-.527-.455.01-.634l19.087-6.362c.529-.176.832.12.684.638l-5.454 19.086c-.15.529-.455.547-.679.045L12 14l6-8-8 6-8.054-2.685z"
></path>
</svg>
</div>
</div>
<span>Esse é o efeito</span>
</buttoon>
<style>
buttoon {
font-family: inherit;
font-size: 1em;
background: royalblue;
color: white;
padding: 0.7em 1em;
padding-left: 0.9em;
display: flex;
align-items: center;
border: none;
border-radius: 16px;
overflow: hidden;
transition: all 0.4s ease-in-out; /* Aumentei a duração da transição para suavizar */
cursor: pointer;
min-height: 40px; /* Defina uma altura mínima para evitar diminuição excessiva */
}
buttoon:hover {
width: 50%;
height: 50px;
transform: translateX(2.5em);
}
buttoon span {
display: block;
margin-left: 0.5em;
transition: all 0.4s ease-in-out; /* Aumentei a duração da transição para suavizar */
}
buttoon svg {
display: block;
transform-origin: center center;
transition: transform 0.4s ease-in-out; /* Aumentei a duração da transição para suavizar */
}
buttoon:hover .svg-wrapper {
animation: fly-1 0.6s ease-in-out infinite alternate;
}
buttoon:hover svg {
transform: translateX(1em) rotate(45deg) scale(1.1);
}
buttoon:hover span {
transform: translateX(9em);
}
buttoon:active {
transform: scale(0.95);
border: none !important;
}
buttoon:active, button:focus{
outline: none !important;
border: none !important;
}
@keyframes fly-1 {
from {
transform: translateY(0.1em);
}
to {
transform: translateY(-0.1em);
}
}
</style>
Enviar Mensagem
Obs.: Para usar esse efeito, basta copiar o código e colar dentro de um widget de html
<buttoon>
<div class="svg-wrapper-1">
<div class="svg-wrapper">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="24"
height="24"
>
<path fill="none" d="M0 0h24v24H0z"></path>
<path
fill="currentColor"
d="M1.946 9.315c-.522-.174-.527-.455.01-.634l19.087-6.362c.529-.176.832.12.684.638l-5.454 19.086c-.15.529-.455.547-.679.045L12 14l6-8-8 6-8.054-2.685z"
></path>
</svg>
</div>
</div>
<span>Esse é o efeito</span>
</buttoon>
<style>
buttoon {
font-family: inherit;
font-size: 1em;
background: royalblue;
color: white;
padding: 0.7em 1em;
padding-left: 0.9em;
display: flex;
align-items: center;
border: none;
border-radius: 16px;
overflow: hidden;
transition: all 0.4s ease-in-out; /* Aumentei a duração da transição para suavizar */
cursor: pointer;
min-height: 40px; /* Defina uma altura mínima para evitar diminuição excessiva */
}
buttoon:hover {
width: 50%;
height: 50px;
transform: translateX(2.5em);
}
buttoon span {
display: block;
margin-left: 0.5em;
transition: all 0.4s ease-in-out; /* Aumentei a duração da transição para suavizar */
}
buttoon svg {
display: block;
transform-origin: center center;
transition: transform 0.4s ease-in-out; /* Aumentei a duração da transição para suavizar */
}
buttoon:hover .svg-wrapper {
animation: fly-1 0.6s ease-in-out infinite alternate;
}
buttoon:hover svg {
transform: translateX(1em) rotate(45deg) scale(1.1);
}
buttoon:hover span {
transform: translateX(9em);
}
buttoon:active, button:focus{
outline: none !important;
border: none !important;
}
@keyframes fly-1 {
from {
transform: translateY(0.1em);
}
to {
transform: translateY(-0.1em);
}
}
</style>
<buttoon>
<div class="svg-wrapper-1">
<div class="svg-wrapper">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="24"
height="24"
>
<path fill="none" d="M0 0h24v24H0z"></path>
<path
fill="currentColor"
d="M1.946 9.315c-.522-.174-.527-.455.01-.634l19.087-6.362c.529-.176.832.12.684.638l-5.454 19.086c-.15.529-.455.547-.679.045L12 14l6-8-8 6-8.054-2.685z"
></path>
</svg>
</div>
</div>
<span>Esse é o efeito</span>
</buttoon>
<style>
buttoon {
font-family: inherit;
font-size: 1em;
background: royalblue;
color: white;
padding: 0.7em 1em;
padding-left: 0.9em;
display: flex;
align-items: center;
border: none;
border-radius: 16px;
overflow: hidden;
transition: all 0.4s ease-in-out; /* Aumentei a duração da transição para suavizar */
cursor: pointer;
min-height: 40px; /* Defina uma altura mínima para evitar diminuição excessiva */
}
buttoon:hover {
width: 50%;
height: 50px;
transform: translateX(2.5em);
}
buttoon span {
display: block;
margin-left: 0.5em;
transition: all 0.4s ease-in-out; /* Aumentei a duração da transição para suavizar */
}
buttoon svg {
display: block;
transform-origin: center center;
transition: transform 0.4s ease-in-out; /* Aumentei a duração da transição para suavizar */
}
buttoon:hover .svg-wrapper {
animation: fly-1 0.6s ease-in-out infinite alternate;
}
buttoon:hover svg {
transform: translateX(1em) rotate(45deg) scale(1.1);
}
buttoon:hover span {
transform: translateX(9em);
}
buttoon:active {
transform: scale(0.95);
border: none !important;
}
buttoon:active, button:focus{
outline: none !important;
border: none !important;
}
@keyframes fly-1 {
from {
transform: translateY(0.1em);
}
to {
transform: translateY(-0.1em);
}
}
</style>
brilha e balança
Obs.: Para usar esse efeito, basta copiar esse código e colar no campo de “css personalizado” da sua página. Como ele usa a classe padrão do botão do Elementor, ao usar o código uma vez e depois puxar novos botões para a página, o efeito se aplicará a todos eles.
.elementor-button {
display: inline-block;
font-weight: 700;
color: #ffffff;
text-align: center;
vertical-align: middle;
user-select: none;
background-color: transparent;
border: 1px solid transparent;
padding: 1.4rem 2.6rem;
font-size: 1.4rem;
line-height: 1.5;
border-radius: 100px;
transition: 0.4s cubic-bezier(0.39, 0.575, 0.565, 1);
position: relative;
z-index: 1;
background: linear-gradient(90deg, #06d2a7, #00bbd6 50%, #06d2a7);
box-shadow: 0 24px 30px rgba(1, 205, 176, 0.55); /*brilho abaixo do botão*/
text-decoration: none;
animation: button-shake 2.5s ease-in-out infinite;
}
.elementor-button::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 9999px;
background: transparent;
z-index: -1;
animation: glow 2.5s ease-in-out infinite;
}
@keyframes glow {
0% {
box-shadow: 0 0 0 0 rgb(1, 205, 176);
}
50% {
box-shadow: 0 0 12px rgba(1, 205, 176, 0.5);
}
70% {
box-shadow: 0 0 0 0 rgba(1, 205, 176, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(1, 205, 176, 0);
}
}
/* Efeito Shake */
@keyframes button-shake {
0% {
transform: translateZ(0);
}
5% {
transform: translate(-1px);
}
10% {
transform: translate(3px);
}
15% {
transform: translate(-5px);
}
20% {
transform: translate(5px);
}
25% {
transform: translateZ(0);
}
100% {
transform: translateZ(0);
}
}
/* Hover para efeito de elevação */
.elementor-button:hover {
text-decoration: none;
transform: translateY(-8px);
}
.elementor-button:focus {
outline: 0;
box-shadow: 0 0 0 0.2rem rgba(71, 59, 240, 0.25);
}
.elementor-button:disabled {
opacity: 0.65;
}
.elementor-button:not(:disabled):not(.disabled) {
cursor: pointer;
}
EFEITO NA SETA
Obs.: Para usar esse efeito, você precisa adicionar a classe “button6” no botão. O tamanho do ícone é controlado no código.
.button6 {
cursor: pointer;
transition: all 0.2s;
}
.button6 .elementor-button-icon{
font-size: 18px; /*tamanho do icone*/
width: 34px;
margin-left: 10px;
transition: transform 0.3s ease-in-out;
}
.button6:hover .elementor-button-icon {
transform: translateX(5px);
}
.button6:active {
transform: scale(0.95);
}
Efeito Seta Dupla
Obs.: Para usar esse efeito, você precisa adicionar a classe “button5” no botão. A cor dos ícones (setas) são colocados pelo código.
Aqui são usados 2 ícones. Um deles é colocado pelo código, o outro é escolhido pela própria opção do botão do Elementor. Pesquise por “arrow” e escolha o icone de seta que não tem esse circulo, só a seta mesmo.
/* Círculo branco */
.button5 .elementor-button .elementor-button-icon {
background: #fff;
width: 32px;
height: 32px;
border-radius: 50%;
position: relative;
display: grid;
place-items: center;
overflow: hidden;
}
/* Ícone visível (inicial) */
.button5 .elementor-button .elementor-button-icon i {
color: #7808d0;
font-size: 14px;
position: absolute;
transform: translate(0, 0) rotate(-25deg);
transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
z-index: 2;
opacity: 1;
}
/* Ícone de reposição (fica "por baixo") */
.button5 .elementor-button .elementor-button-icon::after {
content: "\f061"; /* Font Awesome - seta */
font-family: "Font Awesome 5 Free";
font-weight: 900;
color: #7808d0;
position: absolute;
font-size: 14px;
transform: translate(0, 100%) rotate(-25deg);
transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
z-index: 1;
opacity: 0;
}
/* Hover animado - ícone atual sobe e desaparece */
.button5 .elementor-button:hover .elementor-button-icon i {
transform: translate(-150%, -150%) rotate(-25deg);
opacity: 0;
}
/* Hover animado - novo ícone sobe e aparece */
.button5 .elementor-button:hover .elementor-button-icon::after {
transform: translate(0, 0) rotate(-25deg);
opacity: 1;
}
Corner Border Animation
Obs.: Para usar esse efeito, você precisa adicionar a classe “btn” no botão. Também precisa ir no campo de texto do botão, e na frente do texto deve colocar isso aqui:
<span class=”corner1″></span> <span class=”corner2″></span>
Não se preocupe, essa tag span vai ficar invisivel. Ela serve como âncora para o código css, e deve ser usada.
<span class="corner1"></span> <span class="corner2"></span>
.btn {
position: relative;
display: inline-block;
}
/* Cantos com SVG, rotacionados individualmente */
.btn::before,
.btn::after,
.btn .corner1,
.btn .corner2 {
content: "";
position: absolute;
width: 10px;
height: 10px;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 11 11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='none' stroke='white' stroke-width='1.5' stroke-linejoin='miter' d='M9.5 10V1H1'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: contain;
opacity:0 ;
transition: opacity 0.3s ease, transform 0.3s ease;
pointer-events: none;
}
/* Posições padrão (centralizadas no canto) */
.btn::before {
top: 0;
left: 0;
transform: rotate(-90deg);
}
.btn::after {
top: 0;
right: 0;
transform: rotate(0deg);
}
.btn .corner1 {
bottom: 0;
left: 0;
transform: rotate(-180deg);
}
.btn .corner2 {
bottom: 0;
right: 0;
transform: rotate(90deg);
}
/* Hover: aplica deslocamento + rotação */
.btn:hover::before {
opacity: 1;
transform: translate(-5px, -5px) rotate(-90deg);
}
.btn:hover::after {
opacity: 1;
transform: translate(5px, -5px) rotate(0deg);
}
.btn:hover .corner1 {
opacity: 1;
transform: translate(-5px, 5px) rotate(-180deg);
}
.btn:hover .corner2 {
opacity: 1;
transform: translate(5px, 5px) rotate(90deg);
}
Efeito de sombra
Obs.: Para usar esse efeito, você precisa adicionar a classe “button2” no botão. Também precisa deixar transparente a cor de fundo do botão, porque a cor é aplicada pelo código.
.button2 {
font-weight: bold;
letter-spacing: 0.1em;
border: none;
border-radius: 1.1em;
background-color: #212121;
cursor: pointer;
color: white;
padding: 10px 20px;
transition: box-shadow ease-in-out 0.3s, background-color ease-in-out 0.1s,
letter-spacing ease-in-out 0.1s, transform ease-in-out 0.1s;
box-shadow: 13px 13px 10px #1c1c1c, -13px -13px 10px #262626;
}
.button2:hover {
box-shadow: 16px 16px 33px #121212, -16px -16px 33px #303030;
}
.button2:active {
box-shadow: 16px 16px 33px #121212, -16px -16px 33px #303030, fuchsia 0px 0px 30px 5px;
background-color: fuchsia;
transform: scale(0.95);
}
Efeito Neumorfismo
Obs.: Para usar esse efeito, você precisa adicionar a classe “button3” no botão.
.button3 {
border-radius: 10px;
background: #333;
justify-content: center;
align-items: center;
box-shadow: -5px -5px 15px #444, 5px 5px 15px #222, inset 5px 5px 10px #444,
inset -5px -5px 10px #222;
cursor: pointer;
border: none;
padding: 10px 20px;
font-size: 16px;
color: rgb(161, 161, 161);
transition: 500ms;
}
.button3:hover {
box-shadow: -5px -5px 15px #444, 5px 5px 15px #222, inset 5px 5px 10px #222,
inset -5px -5px 10px #444;
color: #d6d6d6;
transition: 500ms;
}
Efeito Neumorfismo
Obs.: Para usar esse efeito, você precisa adicionar a classe “button4” no botão.
.button4 {
color: #090909;
padding: 0.7em 1.7em;
font-size: 18px;
border-radius: 0.5em;
background: #e8e8e8;
cursor: pointer;
border: 1px solid #e8e8e8;
transition: all 0.3s;
box-shadow: 6px 6px 12px #c5c5c5, -6px -6px 12px #ffffff;
}
.button4:hover {
border: 1px solid white;
}
.button4:active {
box-shadow: 4px 4px 12px #c5c5c5, -4px -4px 12px #ffffff;
}