Como fazer um botão 3D usando CSS

A interface gráfica de uma página da web desempenha um papel vital na qualidade de um site ou aplicativo da web. Para aumentar a usabilidade e tornar a interface atraente, muitas idéias são praticadas. Como outros elementos em uma interface, também existem alguns botões em quase todas as outras páginas da web que executam operações diferentes. Uma das técnicas mais comuns para aprimorar a exibição gráfica de uma interface é criar um botão 3D em vez do botão tradicional simples.

Vamos discutir como um botão 3D é criado e adicionado a uma página da web através do estilo CSS.

Criando um botão 3D usando CSS

Vamos adicionar um exemplo simples de criar um botão 3D no HTML usando propriedades de estilo CSS. Comece criando uma tag de âncora com o atributo href igual ao “JavaScript: Void (0)”Função para criar um botão simples de clique:

= "JavaScript: void (0);"> Clique aqui!

A tag criada tem um atributo href contendo o “JavaScript: Void (0)”Função. Esta função altera a forma do cursor quando é apontada para o botão. Entre as tags de abertura e fechamento de âncora está o texto a ser exibido no botão “Clique aqui”.

Agora, é necessário estilizar o botão simples através das propriedades de estilo CSS para criar uma tela tridimensional:

Adicione algumas propriedades de decoração de texto para que o texto seja exibido no botão:

Cor: RGB (236, 234, 234);
Decoração de texto: Nenhum;
Background-Color: RGB (165, 16, 133);
Font-Family: Georgia, 'Times New Roman', Times, Serif;
Size da fonte: 3em;
exibição: bloco;

Então, lá adicione alguns “kit da web”Propriedades para adicionar efeitos de sombra e raio ao botão:

-Webkit-Border-Radius: 9px;
-Webkit-box-Shadow: 0px 9px 0px RGB (114, 19, 98), 0px 9px 25px rgba (0, 0, 0, .7);
-MOZ-BOX-SHADOW: 0PX 9PX 0PX RGB (126, 22, 108), 0px 9px 25px rgba (0, 0, 0, .7);
Box-Shadow: 0px 9px 0px RGB (133, 12, 113), 0px 9px 25px rgba (0, 0, 0, .7);

O botão também deve ser decorado em relação à sua área, margem e preenchimento, etc:

margem: 100px automático;
Largura: 160px;
Alinhamento de texto: centro;
preenchimento: 4px;

Para adicionar efeitos de sombra ao botão quando estiver ativo ou clicado, há um CSS “:ativo”Seletor:

A: ativo
-Webkit-box-Shadow: 0px 3px 0px RGB (102, 27, 96), 0px 3px 6px rgba (0, 0, 0, .9);
-Moz-box-shadow: 0px 3px 0px RGB (112, 27, 91), 0px 3px 6px rgba (0, 0, 0, .9);
Box-Shadow: 0px 3px 0px RGB (126, 8, 116), 0px 3px 6px rgba (0, 0, 0, .9);
Posição: relativa;
topo: 7px;

O trecho de código completo para criar o botão é o seguinte:

Cor: RGB (236, 234, 234);
Decoração de texto: Nenhum;
Background-Color: RGB (165, 16, 133);
Font-Family: Georgia, 'Times New Roman', Times, Serif;
Size da fonte: 3em;
exibição: bloco;
preenchimento: 4px;
-Webkit-Border-Radius: 9px;
-Webkit-box-Shadow: 0px 9px 0px RGB (114, 19, 98), 0px 9px 25px rgba (0, 0, 0, .7);
-MOZ-BOX-SHADOW: 0PX 9PX 0PX RGB (126, 22, 108), 0px 9px 25px rgba (0, 0, 0, .7);
Box-Shadow: 0px 9px 0px RGB (133, 12, 113), 0px 9px 25px rgba (0, 0, 0, .7);
margem: 100px automático;
Largura: 160px;
Alinhamento de texto: centro;
A: ativo
-Webkit-box-Shadow: 0px 3px 0px RGB (102, 27, 96), 0px 3px 6px rgba (0, 0, 0, .9);
-Moz-box-shadow: 0px 3px 0px RGB (112, 27, 91), 0px 3px 6px rgba (0, 0, 0, .9);
Box-Shadow: 0px 3px 0px RGB (126, 8, 116), 0px 3px 6px rgba (0, 0, 0, .9);
Posição: relativa;
topo: 7px;

Depois de executar o código acima, o seguinte será a saída:

Isso resume o método para criar um botão 3D usando CSS.

Conclusão

Fazer um botão 3D clicável através da propriedade CSS Styling requer a criação de um botão simples através de uma tag HTML primeiro e depois aplicando as propriedades do kit da web CSS, juntamente com outras propriedades referentes à tag html através da qual o botão foi criado. Isso faz com que o botão pareça tridimensional. Para adicionar os efeitos ao botão da instância quando o botão é clicado ou ativo, use o seletor ativo CSS.