Botões – Arsenal

[Botão] Futurista Matrix

Adicione um Widget de botão no Elementor

Defina a classe: btn

Cole esse código no botão (Avançado/Custom CSS)

Código CSS

.btn{
  width: fit-content;
  position: relative; /* ancora os pseudos ::before/::after */
  background: linear-gradient(0deg, #00FF73 0%, #68FFAC 100%); /* cor do BG aqui */
}

.btn:hover{
  background: transparent;
  box-shadow: none;
}

.btn::before,
.btn::after{
  content: ”;
  position: absolute;
  top: 0;
  right: 0;
  height: 2px;
  width: 0;
  background: #00FF73; /* cor principal da borda no hover */
  box-shadow:
    -1px -1px 5px 0px #68FFAC,   /* brilho verde claro */
     7px  7px 20px 0px #00C8FF,  /* toque ciano p/ contraste */
     4px  4px 5px  0px #00FF73;  /* verde principal */
  transition: 400ms ease all;
}

.btn::after{
  right: inherit;
  top: inherit;
  left: 0;
  bottom: 0;
}

.btn:hover::before,
.btn:hover::after{
  width: 100%;
  transition: 800ms ease all;
}

outubro 11, 2025

[Botão] + Animação de Ícone

Adicione um Widget de botão no Elementor

Não precisa definir classe

Defina um ícone (como nesse exemplo usei uma arrow right)

Cole esse código no botão (Avançado/Custom CSS)

Código CSS

.elementor-button{
  background-image: linear-gradient(150deg, #00FF73, #68FFAC); /* Gradiente de fundo (verde) */
  border: 2px solid #00FF73;                                   /* Borda (verde) */
  border-radius: 6px;                                          /* Arredondamento */
  box-shadow: 0 10px 40px -16px #00FF7380;                     /* Sombra verde (hex com alfa) */
  transition: .5s all;                                         /* Transição suave */
}

.elementor-button:hover{
  transform: translate(0, -3px);                               /* movimento sutil */
}

.elementor-button:hover .elementor-button-icon{
  animation: moveIcon 1.5s linear infinite;                    /* anima ícone no hover */
}

.elementor-button-icon{
  margin-top: 0px;                                             /* alinhar ícone ao centro */
}

@keyframes moveIcon{
  0%   { transform: translateX(0); }
  50%  { transform: translateX(8px); }
  100% { transform: translateX(0); }
}

outubro 11, 2025

[Botão] Brilho Fundo

Adicione um Widget de botão no Elementor

Não precisa definir classe

Cole esse código no botão (Avançado/Custom CSS)

Código CSS

.elementor-button{
    background: #00FF73 !important;
  border: 1px solid #00FF73 !important; /*defina a borda*/
  box-shadow: 0 0 5px #00FF73, /*defina o brilho*/
              0 0 20px #00FF73, /*defina o brilho*/
              0 0 50px #00FF73, /*defina o brilho*/
              0 0 100px #00FF73 !important; /*defina o brilho*/
}

outubro 11, 2025

[Botão] Cortes de canto

Adicione um Widget de botão no Elementor

Não precisa definir classe

Recomendo deixar a cor de fundo do botão sem cor (transparente)

Corte (embaixo e a direita)

Código CSS

.elementor-button{
    background: linear-gradient(-45deg, transparent 10px, #00FF73 0);
}

Corte (embaixo e a esquerda)

Código CSS

.elementor-button{
    background: linear-gradient(45deg, transparent 10px, #00FF73 0);
}

Corte (Superior e a esquerda)

Código CSS

.elementor-button{
    background: linear-gradient(45deg, transparent 10px, #00FF73 0);
}

Corte (Superior/Direita)

Código CSS

.elementor-button{
    background: linear-gradient(-135deg, transparent 10px, #00FF73 0);
}

Corte (Dois cantos)

Código CSS

.elementor-button{
    background: linear-gradient(-135deg, transparent 10px, #00FF73 0) right,
    linear-gradient(45deg, transparent 10px, #00FF73 0) left;
    background-size: 50% 100%;
    background-repeat: no-repeat;
}

Corte (Quatro cantos)

Código CSS

.elementor-button{
    background: linear-gradient(135deg, transparent 10px, #00FF73 0) top left,
    linear-gradient(-135deg, transparent 10px, #00FF73 0) top right,
    linear-gradient(-45deg, transparent 10px, #00FF73 0) bottom right,
    linear-gradient(45deg, transparent 10px, #00FF73 0) bottom left;
    background-size: 50% 50%;
    background-repeat: no-repeat;
}

outubro 11, 2025

[Botão] Gradiente animado

Adicione um Widget de botão no Elementor

Não precisa definir classe

Cole esse código no botão (Avançado/Custom CSS)

Código CSS

.elementor-button{
  animation: 3.4s cubic-bezier(0.2, 0.5, 0.9, 0.6) 2s infinite normal none running textura;
  background-image: linear-gradient(45deg, #00FF73, #BEFFB5, #00FF73, #BEFFB5); /* defina as cores do BG aqui (verdes) */
  background-size: 400% 200%;
  transition: background 1.6s cubic-bezier(0.55, 0.1, 0.47, 0.94) 0s;
}

@keyframes textura{
  0%   { background-position: 0 0; }
  100% { background-position: 100% 0; }
}

outubro 11, 2025

[Botão] Sombra box

Adicione um Widget de botão no Elementor

Defina a classe: btn

Cole esse código no botão (Avançado/Custom CSS)

Código CSS

.btn{
  background: #090909;        /* defina a cor do BG aqui (escuro p/ contraste) */
  border-radius: .5rem;       /* defina o arredondamento aqui */

  /* bordas “alto-relevo” em verde */
  border-bottom: 2px solid #00FF73;
  border-right: 2px solid #00FF73;
  border-top: 2px solid #090909;
  border-left: 2px solid #090909;

  transition-duration: 1s;
  transition-property: border-top, border-left, border-bottom, border-right, box-shadow;
}

.btn:hover{
  /* inverte o relevo e adiciona brilho */
  border-top: 2px solid #00FF73;
  border-left: 2px solid #00FF73;
  border-bottom: 2px solid #68FFAC;
  border-right: 2px solid #68FFAC;

  /* cores do hover (glow em verde) */
  box-shadow:
    rgba(0, 255, 115, 0.40) 5px 5px,
    rgba(0, 255, 115, 0.30) 10px 10px,
    rgba(0, 255, 115, 0.20) 15px 15px;
}

outubro 11, 2025

[Botão] Giro + Preenchimento

Adicione um Widget de botão no Elementor

Defina a classe: btn

Cole esse código no botão (Avançado/Custom CSS)

Código CSS

.btn{
  border: 4px solid #00FF73;         /* configure a borda aqui (verde neon) */
  transition: ease-in-out 0.3s;
  background-color: transparent;     /* cor do BG (estado normal) */
}

.btn:hover{
  transform: scale(1.2) rotate(10deg); /* aumento e giro do hover aqui */
  background-color: #002511;           /* cor do BG no hover (verde bem escuro) */
  /* se preferir mais “brilho”, use: background-color: #00FF73; color: #002511; */
}

outubro 11, 2025

[Botão] Bordas animadas v2

Adicione um Widget de botão no Elementor

Defina a classe: btn

Cole esse código no botão (Avançado/Custom CSS)

Código CSS

.btn {
  width: 350px; /*largura do botão*/
  height: 64px; /*altura do botão*/
  border-radius: 200px;
  background: linear-gradient(
    to right,
    #00FF73, #00C8FF, #00FF73, #00FF73, #00C8FF, #00FF73
  ); /* cor da borda (verde + ciano p/ mais contraste) */
  background-size: 250%;
  background-position: left;
  display: flex;
  align-items: center;
  justify-content: center;
  transition-duration: 1s;
  overflow: hidden;
}

.btn::before {
  position: absolute;
  content: "Clique aqui"; /*texto do botão*/
  color: #00FF73;  /*cor do texto do botão (verde neon p/ alto contraste)*/
  display: flex;
  align-items: center;
  justify-content: center;
  width: 97%;
  height: 90%;
  border-radius: 200px;
  transition-duration: 1s;
  background-color: rgba(9, 9, 9, 0.92); /*bg do botão escuro (#090909)*/
  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);
}

outubro 11, 2025

[Botão] Bordas animadas

Adicione um Widget de botão no Elementor

Defina a classe: btn

Cole esse código no botão (Avançado/Custom CSS)

Código CSS

.btn{
  overflow: hidden;
}

/* Borda animada multicolor que combina com verde */
.btn .elementor-button::before{
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 400%;
  height: 100%;
  background: linear-gradient(
    115deg,
    #00FF73,  
    #DBFFBF,  
    #A7FFCF,  
    #00C8FF, 
    #00FF73  
  ); /* cor da borda */
  background-size: 25% 100%;
  animation: bgs .75s linear infinite;
  animation-play-state: paused;
  translate: -5% 0%;
  transition: translate .25s ease-out;
  z-index: 0;
}

/* Fundo interno (escuro p/ dar contraste ao arco-íris) */
.btn .elementor-button::after{
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 5px);
  height: calc(100% - 5px);
  background: #090909; /* cor do BG */
  background-size: 25% 100%;
  animation: bgs .75s linear infinite;
  animation-play-state: paused;
  transition: translate .25s ease-out;
  z-index: 1;
}

/* Ativa a animação ao passar o mouse */
.btn .elementor-button:hover::before{
  animation-play-state: running;
  transition-duration: .75s;
  translate: 0% 0%;
}

/* mantenho o seletor auxiliar como na referência */
selector *{
  z-index: 2; /* garante o texto acima das camadas ::before/::after */
}

/* animação do gradiente */
@keyframes bgs{
  to { transform: translateX(-25%); }
}

outubro 11, 2025

[Botão] Seta redonda + Giro

Adicione um Widget de botão no Elementor

Defina a classe: btn

Coloque um Icone ao botão de Arrow (Seta) para direita, exemplo:

Cole esse código no botão (Avançado/Custom CSS)

Código CSS

/* mesmos seletores, só troquei .bth → .btn e mantive o fix do rotate() */
.btn .elementor-button{
  padding: 0.4rem 0.4rem 0.4rem 2rem !important;
  border-radius: 55px !important;
  background: linear-gradient(92deg, #00FF73 -3.01%, #68FFAC 95.31%) !important; /* Gradiente do BG (verde) */
}

.btn .elementor-button-text{
  align-self: center;
}

.btn .elementor-button-icon{
  font-size: 19px !important;
  padding: 10px;
  margin-left: 10px;
  background: #000704; /* cor da bola do icon */
  border-radius: 200px;
  color: #00FF73 !important;
  vertical-align: middle;
  transform: rotate(-45deg);  /* rotação inicial */
  transition: 0.5s ease all;
}

.btn .elementor-button-icon svg path{
  transform: rotate(0deg);
  fill: #000000 !important;
  color: #000000 !important;
  transition: 0.7s ease all;
}

.btn:hover .elementor-button-icon{
  transform: rotate(0deg);    /* “desvira” no hover */
}

outubro 11, 2025

Categoria: Botões

[Botão] Futurista Matrix

Adicione um Widget de botão no Elementor

Defina a classe: btn

Cole esse código no botão (Avançado/Custom CSS)

[Botão] + Animação de Ícone

Adicione um Widget de botão no Elementor

Não precisa definir classe

Defina um ícone (como nesse exemplo usei uma arrow right)

Cole esse código no botão (Avançado/Custom CSS)

[Botão] Brilho Fundo

Adicione um Widget de botão no Elementor

Não precisa definir classe

Cole esse código no botão (Avançado/Custom CSS)

[Botão] Cortes de canto

Adicione um Widget de botão no Elementor

Não precisa definir classe

Recomendo deixar a cor de fundo do botão sem cor (transparente)

Corte (embaixo e a direita)

Corte (embaixo e a esquerda)

Corte (Superior e a esquerda)

Corte (Superior/Direita)

Corte (Dois cantos)

Corte (Quatro cantos)

[Botão] Gradiente animado

Adicione um Widget de botão no Elementor

Não precisa definir classe

Cole esse código no botão (Avançado/Custom CSS)

[Botão] Sombra box

Adicione um Widget de botão no Elementor

Defina a classe: btn

Cole esse código no botão (Avançado/Custom CSS)

[Botão] Giro + Preenchimento

Adicione um Widget de botão no Elementor

Defina a classe: btn

Cole esse código no botão (Avançado/Custom CSS)

[Botão] Bordas animadas v2

Adicione um Widget de botão no Elementor

Defina a classe: btn

Cole esse código no botão (Avançado/Custom CSS)

[Botão] Bordas animadas

Adicione um Widget de botão no Elementor

Defina a classe: btn

Cole esse código no botão (Avançado/Custom CSS)

[Botão] Seta redonda + Giro

Adicione um Widget de botão no Elementor

Defina a classe: btn

Coloque um Icone ao botão de Arrow (Seta) para direita, exemplo:

Cole esse código no botão (Avançado/Custom CSS)