[Botão] Completando + Cortes laterais
Adicione um Widget de botão no Elementor
Defina a Classe no botão : btn
Cole esse código no botão (Avançado/Custom CSS)
Código CSS
Copiar Código
/* Botão com borda animada — versão HLM (verdes) Como customizar rapidamente: - Troque as cores no bloco de vars abaixo - --border-color: degrade da borda animada - --bg: cor de fundo interna do botão - --color: cor do texto (fica branco no hover) */ .btn { /* ======= Vars do tema (verdes) ======= */ --border-color: linear-gradient(-45deg, #0F4226, #009A46, #20BC67); /* degrade da borda */ --border-width: .125em; /* espessura da borda “recortada” */ --curve-size: .5em; /* raio dos cortes nos cantos */ --blur: 30px; /* não usado diretamente, mas útil p/ variantes */ --bg: #000704; /* fundo interno do botão (verde bem escuro) */ --color: #eafff4; /* cor do texto (claro) */ color: var(--color); /* mantém a função/estrutura original */ position: relative; /* BG/efeitos presos ao botão */ isolation: isolate; display: inline-grid; place-content: center; padding: .5em 1.5em; font-size: 17px; border: 0; text-transform: uppercase; box-shadow: 10px 10px 20px rgba(0, 0, 0, .6); /* “recorte” do contorno com cantos curvos */ clip-path: polygon( 0% var(--curve-size), var(--curve-size) 0, 100% 0, 100% calc(100% - var(--curve-size)), calc(100% - var(--curve-size)) 100%, 0 100% ); transition: color 250ms; } .btn::after, .btn::before { content: ''; position: absolute; inset: 0; /* cobre toda a área do botão */ } /* camada de borda animada (degrade em movimento) */ .btn::before { background: var(--border-color); background-size: 300% 300%; animation: move-bg7234 5s ease infinite; z-index: -2; /* atrás de tudo */ } @keyframes move-bg7234 { 0% { background-position: 31% 0% } 50% { background-position: 70% 100% } 100% { background-position: 31% 0% } } /* camada interna (fundo do botão) “recortada” para revelar a borda */ .btn::after { background: var(--bg); z-index: -1; clip-path: polygon( var(--border-width) calc(var(--curve-size) + var(--border-width) * .5), calc(var(--curve-size) + var(--border-width) * .5) var(--border-width), calc(100% - var(--border-width)) var(--border-width), calc(100% - var(--border-width)) calc(100% - calc(var(--curve-size) + var(--border-width) * .5)), calc(100% - calc(var(--curve-size) + var(--border-width) * .5)) calc(100% - var(--border-width)), var(--border-width) calc(100% - var(--border-width)) ); transition: clip-path 500ms; } /* hover/focus: anima o “recorte” para destacar a borda */ .btn:where(:hover, :focus)::after { clip-path: polygon( calc(100% - var(--border-width)) calc(100% - calc(var(--curve-size) + var(--border-width) * 0.5)), calc(100% - var(--border-width)) var(--border-width), calc(100% - var(--border-width)) var(--border-width), calc(100% - var(--border-width)) calc(100% - calc(var(--curve-size) + var(--border-width) * .5)), calc(100% - calc(var(--curve-size) + var(--border-width) * .5)) calc(100% - var(--border-width)), calc(100% - calc(var(--curve-size) + var(--border-width) * 0.5)) calc(100% - var(--border-width)) ); transition: 200ms; } /* texto fica branco no destaque */ .btn:where(:hover, :focus) { color: #ffffff; }