Cómo hacer un botón 3D usando CSS

La interfaz gráfica de una página web juega un papel vital en la calidad de un sitio web o una aplicación web. Para aumentar la usabilidad y hacer que la interfaz sea atractiva, se practican muchas ideas. Al igual que otros elementos en una interfaz, también hay algunos botones en casi cualquier otra página web que realicen diferentes operaciones. Una de las técnicas más comunes para mejorar la visualización gráfica de una interfaz es crear un botón 3D en lugar del botón tradicional simple.

Discutamos cómo se crea y agregamos un botón 3D a una página web a través del estilo CSS.

Creación de un botón 3D usando CSS

Agreguemos un ejemplo simple de crear un botón 3D en HTML usando propiedades de estilo CSS. Comience creando una etiqueta de anclaje con el atributo href igual al "JavaScript: Void (0)"Función para crear un botón simple haciendo clic:

= "JavaScript: void (0);"> Haga clic aquí!

La etiqueta creada tiene un atributo HREF que contiene el "JavaScript: Void (0)" función. Esta función cambia la forma del cursor cuando se apunta al botón. Entre las etiquetas de anclaje de apertura y cierre se encuentra el texto que se mostrará en el botón "Haga clic aquí".

Ahora, es necesario peinar el botón simple a través de las propiedades de estilo CSS para crear una pantalla tridimensional:

Agregue algunas propiedades de decoración de texto para que el texto se muestre en el botón:

Color: RGB (236, 234, 234);
Decoración de texto: ninguna;
Color de fondo: RGB (165, 16, 133);
Font-Family: Georgia, 'Times New Roman', Times, serif;
tamaño de fuente: 3em;
bloqueo de pantalla;

Entonces, agregue algunos "kit web"Propiedades para agregar efectos de sombra y radio al botón:

-WebKit-Border-Radius: 9px;
-Webkit-box-shadow: 0px 9px 0px rgb (114, 19, 98), 0px 9px 25px rgba (0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,, .7);
-MOZ-Box-Shadow: 0px 9px 0px RGB (126, 22, 108), 0px 9px 25px RGBA (0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, .7);
Shadow de caja: 0px 9px 0px RGB (133, 12, 113), 0px 9px 25px rgba (0, 0, 0, .7);

El botón también debe decorarse con respecto a su área, margen y relleno, etc.:

Margen: 100px Auto;
Ancho: 160px;
Text-Align: Center;
relleno: 4px;

Para agregar efectos de sombra al botón cuando está activo o hecho clic, hay un CSS ":activo"Selector:

A: Activo
-Webkit-box-shadow: 0px 3px 0px rgb (102, 27, 96), 0px 3px 6px rgba (0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, .9);
-MOZ-Box-Shadow: 0PX 3PX 0PX RGB (112, 27, 91), 0px 3px 6px RGBA (0, 0, 0, 0, 0, 0, 0, 0, 0, 0, .9);
Shadow de caja: 0px 3px 0px rgb (126, 8, 116), 0px 3px 6px rgba (0, 0, 0, .9);
Posición: relativo;
Arriba: 7px;

El fragmento de código completo para crear el botón es el siguiente:

Color: RGB (236, 234, 234);
Decoración de texto: ninguna;
Color de fondo: RGB (165, 16, 133);
Font-Family: Georgia, 'Times New Roman', Times, serif;
tamaño de fuente: 3em;
bloqueo de pantalla;
relleno: 4px;
-WebKit-Border-Radius: 9px;
-Webkit-box-shadow: 0px 9px 0px rgb (114, 19, 98), 0px 9px 25px rgba (0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,, .7);
-MOZ-Box-Shadow: 0px 9px 0px RGB (126, 22, 108), 0px 9px 25px RGBA (0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, .7);
Shadow de caja: 0px 9px 0px RGB (133, 12, 113), 0px 9px 25px rgba (0, 0, 0, .7);
Margen: 100px Auto;
Ancho: 160px;
Text-Align: Center;
A: Activo
-Webkit-box-shadow: 0px 3px 0px rgb (102, 27, 96), 0px 3px 6px rgba (0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, .9);
-MOZ-Box-Shadow: 0PX 3PX 0PX RGB (112, 27, 91), 0px 3px 6px RGBA (0, 0, 0, 0, 0, 0, 0, 0, 0, 0, .9);
Shadow de caja: 0px 3px 0px rgb (126, 8, 116), 0px 3px 6px rgba (0, 0, 0, .9);
Posición: relativo;
Arriba: 7px;

Después de ejecutar el código anterior, el siguiente será la salida:

Esto resume el método para crear un botón 3D usando CSS.

Conclusión

Hacer un botón 3D que se pueda hacer clic a través de la propiedad de estilo CSS requiere crear un botón simple a través de una etiqueta HTML primero y luego aplicar las propiedades del kit web CSS junto con otras propiedades que se refieren a la etiqueta HTML a través de la cual se ha creado el botón. Esto hace que el botón se vea tridimensional. Para agregar los efectos al botón para la instancia cuando se hace clic o activo el botón, use el selector CSS Active Selector.