Botão Cyberpunk

Visualização

Um botão com brilho neon e efeito de falha ao passar o mouse, perfeito para temas sombrios ou UIs inspiradas em ficção científica.

Casos de uso e recursos

Cyberpunk/SF Taste: Ideal para projetos que desejam criar uma visão de mundo extraordinária ou futurista, como UI de jogos, serviços Web3 e portfólios criativos.
Brilho neon e efeitos de falha: A cor base muda ao passar o mouse e uma animação de falha selvagem é ativada, dando ao usuário um forte impacto.
Desenho de formas leves usando clip-path: Formas exclusivas com cantos ausentes são expressas apenas com clip-path CSS sem usar imagens, portanto funcionam de forma leve e independente da resolução.

Pontos de design e UX

Feedback visual claro: Mudanças dinâmicas ao passar o mouse (transição de cor de ciano para magenta e brilho) comunicam intuitivamente que o elemento é interativo.
Efeito 3D com múltiplas camadas: Uma moldura mecânica com profundidade é construída combinando pseudoelementos (::before, ::after) e elementos decorativos (.decoration).
Considerações de acessibilidade: aria-hidden="true" é adicionado ao texto copiado para o efeito de falha para evitar leitura duplicada por leitores de tela, etc.

Como personalizar

Você pode criar facilmente botões cyberpunk que correspondam às cores do tema do seu projeto, simplesmente substituindo as variáveis CSS.


.cyber-btn {

  /* メインカラー（通常時の色） */

  --primary-color: #00ffcc;

  

  /* セカンダリカラー（ホバー時の色） */

  --secondary-color: #ff00ff;

  

  /* 背景色（内側の暗い部分） */

  --bg-color: #050505;

}

Ao especificar uma fonte monoespaçada (monospace), você pode enfatizar ainda mais a atmosfera de uma tela de hacking ou console do sistema.

Código de implementação

<button class="cyber-btn">

<span class="main-text">SYSTEM_READY</span>

<span class="glitch-text" aria-hidden="true">SYSTEM_READY</span>

<span class="decoration"></span>

</button>



<style>
/* カスタムプロパティと基本スタイル */

.cyber-btn {

--primary-color: #00ffcc;

--secondary-color: #ff00ff;

--bg-color: #050505;



position: relative;

padding: 1rem 2.5rem;

font-family: 'Courier New', Courier, monospace;

font-size: 1.2rem;

font-weight: bold;

letter-spacing: 0.15em;

color: var(--primary-color);

background-color: transparent;

border: none;

cursor: pointer;

outline: none;

text-transform: uppercase;

}



/* 背景レイヤー */

.cyber-btn::before,

.cyber-btn::after {

content: '';

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

z-index: 0;

transition: all 0.3s ease;

}



/* 外側のフレーム（角欠け形状） */

.cyber-btn::before {

background-color: var(--primary-color);

clip-path: polygon(0 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%);

z-index: -2;

}



/* 内側の背景（フレームとの差分でボーダーを表現） */

.cyber-btn::after {

background-color: var(--bg-color);

clip-path: polygon(2px 2px, calc(100% - 2px) 2px, calc(100% - 2px) calc(100% - 16px), calc(100% - 16px) calc(100% - 2px), 2px calc(100% - 2px));

z-index: -1;

}



/* グリッチ用の隠しテキスト */

.cyber-btn .glitch-text {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

display: flex;

align-items: center;

justify-content: center;

background-color: var(--bg-color);

color: var(--secondary-color);

clip-path: polygon(2px 2px, calc(100% - 2px) 2px, calc(100% - 2px) calc(100% - 16px), calc(100% - 16px) calc(100% - 2px), 2px calc(100% - 2px));

opacity: 0;

z-index: 1;

}



/* メインテキスト */

.cyber-btn .main-text {

position: relative;

z-index: 2;

text-shadow: 0 0 8px rgba(0, 255, 204, 0.5);

transition: all 0.3s ease;

}



/* ホバー時のスタイル変更 */

.cyber-btn:hover::before {

background-color: var(--secondary-color);

box-shadow: 0 0 20px var(--secondary-color);

}



.cyber-btn:hover .main-text {

opacity: 0;

}



.cyber-btn:hover .glitch-text {

opacity: 1;

animation: cyber-glitch-anim 0.25s cubic-bezier(.25, .46, .45, .94) both infinite;

}



/* 右下の小さな三角形の装飾 */

.cyber-btn .decoration {

position: absolute;

bottom: -1px;

right: -1px;

width: 20px;

height: 20px;

background-color: var(--primary-color);

clip-path: polygon(100% 0, 100% 100%, 0 100%);

z-index: 3;

transition: all 0.3s ease;

}



.cyber-btn:hover .decoration {

background-color: var(--secondary-color);

box-shadow: 0 0 10px var(--secondary-color);

}



/* グリッチアニメーションの定義 */

@keyframes cyber-glitch-anim {

0% {

  clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);

  transform: translate(-4px, 2px);

  color: var(--primary-color);

}

20% {

  clip-path: polygon(0 40%, 100% 40%, 100% 50%, 0 50%);

  transform: translate(4px, -2px);

  color: #fff;

}

40% {

  clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);

  transform: translate(-4px, 2px);

  color: var(--secondary-color);

}

60% {

  clip-path: polygon(0 15%, 100% 15%, 100% 30%, 0 30%);

  transform: translate(4px, 2px);

  color: var(--primary-color);

}

80% {

  clip-path: polygon(0 80%, 100% 80%, 100% 90%, 0 90%);

  transform: translate(-2px, -2px);

  color: #ff0;

}

100% {

  clip-path: polygon(0 50%, 100% 50%, 100% 60%, 0 60%);

  transform: translate(2px, -2px);

  color: var(--secondary-color);

}

}
</style>

Status de compatibilidade do navegador

Ele usa clip-path e animações CSS padrão para desenho e funciona bem nos principais navegadores modernos.

Cromo: 55+
Raposa de fogo: 54+
Safári: 10.1+

-Borda: 79+