Estilize um botão visualmente e obtenha o HTML e o CSS para usá-lo em seu site. Comece com uma predefinição, ajuste a tipografia, cores, forma e sombras, e visualize os estados de interação antes de exportar.
Escolha um ponto de partidaPersonalize ao seu gosto
Navegue pelas predefinições 44 nas coleções Everyday, Classic, Shaped, Expressive, Gradients e Elite. Cada predefinição é um ponto de partida que você pode editar.
Como as predefinições afetam seu design
Escolha primeiro, depois ajuste
Use a coleção Style para filtrar a galeria. Aplicar uma predefinição substitui os estilos padrão e de hover, mantendo o texto e o nome da classe do seu botão.
Experimente um preenchimento sólido simples, cantos arredondados, um contorno nítido ou um tratamento mais decorativo. Assim que encontrar uma direção, use as outras abas para ajustar os detalhes à sua página.
Faça o rótulo parecer adequado
Defina o texto do botão, família da fonte, tamanho, peso, espaçamento, altura da linha, alinhamento e cor do texto. Veja o rótulo ser atualizado enquanto você trabalha.
Ajuste o texto e o espaçamento
Tipografia que se adapta à ação
O texto contém os controles de fonte e um segundo campo de texto do botão. O tamanho da fonte varia de 10 a 80 px; as famílias listadas usam fontes disponíveis no dispositivo do visitante.
Use um rótulo curto que descreva a ação. Em Fill, o preenchimento horizontal e vertical adiciona espaço ao redor dele sem alterar o tamanho da fonte. Verifique rótulos mais longos na página onde o botão será usado.
Escolha um preenchimento sólido ou gradiente
Use uma cor de fundo ou misture duas cores com um gradiente linear. Seletores de cores e entradas hexadecimais permitem que você trabalhe visual ou precisamente.
Defina cores e a direção do gradiente
Duas cores, uma direção clara
Em Fill, altere o estilo de preenchimento para Linear gradient para revelar a segunda cor e o ângulo do gradiente. O ângulo varia de 0 a 360 graus.
Os campos hexadecimais aceitam uma cor completa de seis dígitos ou uma abreviação de três dígitos. Teste o rótulo branco ou colorido contra ambas as extremidades de um gradiente; o estúdio não certifica automaticamente o contraste do texto.
Controle o contorno e a profundidade
Ajuste cantos vinculados ou independentes, largura e estilo da borda, sombras da caixa e sombras do texto. Dê ao botão uma forma que se adapte ao seu contexto.
Explore cantos, bordas e sombras
De um retângulo nítido a uma pílula suave
Em Shape, mantenha Link all corners ativado para um raio compartilhado, ou desative-o para definir cada canto. Os estilos de borda incluem sólido, tracejado, pontilhado, duplo, inset, outset, ridge, groove e nenhum.
Em Shadow, defina deslocamentos horizontais e verticais, desfoque, cor e opacidade. A sombra da caixa também possui espalhamento e um interruptor de inset. A sombra do texto é separada, para que você possa adicionar profundidade ao rótulo sem alterar o contorno do botão.
Projete também a interação
Edite os estilos Default e Hover separadamente. Visualize as aparências Default, Hover e Active, depois compare o botão em telas claras e escuras.
Entenda os estados de edição e visualização
Dois estilos editáveis, três estados de visualização
O estado de edição escolhe qual estilo seus controles alteram. Os botões de estado da tela apenas escolhem a visualização. Passar o mouse ou pressionar a visualização também mostra sua interação.
Valores de hover que ainda correspondem ao padrão seguem as edições base até serem personalizados. O CSS exportado inclui uma regra de hover quando necessário, um contorno de foco visível, um movimento ativo e uma regra de redução de movimento.
Traga o CSS para o seu projeto
Copie o CSS gerado e o botão HTML correspondente, ou baixe uma folha de estilo. Um nome de classe mantém as duas peças conectadas.
Copie, baixe e mantenha seu trabalho
Código simples que você pode usar diretamente
Escolha um nome de classe distinto, copie CSS da sua aba, depois copie o botão de HTML. O download salva um arquivo .css nomeado após a classe; ele não baixa uma página da web completa.
A visualização e a geração de código são executadas no seu navegador. O estúdio tenta lembrar um rascunho no armazenamento local deste navegador; exporte tudo o que deseja manter. Reset retorna o estúdio ao seu estilo inicial.
Texto e estilos dentro. HTML e CSS fora.
Nenhum upload é necessário. JavaScript alimenta o editor ao vivo no seu navegador. Copie o HTML e o CSS separadamente, ou baixe a folha de estilo CSS. A pilha de fontes gerada usa fontes disponíveis no dispositivo do visualizador.
