Hoy vamos a divertirnos mientras echamos un vistazo a una nueva e increíble herramienta gratuita para desarrolladores web llamada simplemente CSS Button. Esta aplicación web hace que sea rápido y fácil hacer los botones CSS de sus sueños usando controles simples e intuitivos.
He visto muchos otros fabricantes de botones de CSS antes y casi ninguno realmente merece un uso repetido, pero este sitio tiene muchas ventajas y puede ahorrarle mucho tiempo y frustración. Vamos a saltar y comprobarlo!
Conoce el botón CSS
La aplicación CSS Button es ideal para iniciar tus botones. Para comenzar, hay algunas cosas en la página de inicio que no querrá perderse. Los controles básicos son bastante obvios, puede iniciar un nuevo botón desde cero, desproteger y modificar una plantilla o conectarse a Twitter para poder guardar su trabajo.
Además, no te pierdas el botón ¿Aleatorio? Característica en el pie de página. No hay demasiado contenido en el sitio en este momento (la aplicación todavía está en versión beta) pero a medida que se recupera y gana más usuarios, esta función se convertirá en una forma divertida de descubrir nuevas ideas de botones.
Creando un botón desde cero
Nunca me gusta optar por la salida fácil, así que empecemos por crear nuestro propio botón completamente desde cero. Para hacer esto, simplemente pulsa el enlace de la izquierda:
Esto debería llevarlo a una nueva pantalla donde tendrá todos los controles que necesita para crear un botón súper elegante. Todas las entradas son básicas y utilizan formularios simples o controles WYSISYG intuitivos.
Iremos a través de cada paso para mostrarle cómo funciona el proceso. Tenga en cuenta que esto puede sentirse bastante involucrado en un diseño escrito, pero una vez que lo pruebe, el esfuerzo realmente se sentirá mínimo.
Gradiente de fondo
El primer paso que vamos a tomar es definir un fondo para nuestro botón. Puedes elegir un color sólido o un degradado, tomaré la ruta del degradado. Esto utiliza selectores de color simples para ayudarte a construir tu gradiente. Si alguna vez ha codificado los gradientes CSS a mano, entonces sabe que ya estamos ahorrando una gran cantidad de tiempo porque elegir dos colores es mucho más fácil que escribir el lío del código necesario para realizar esta operación.
Al hacer clic en el relámpago junto a una opción, se muestra su lista de controles. Para muchos de estos, puede hacer clic varias veces para agregar el efecto varias veces. Esto ayuda a crear capas realmente complejas, como Photoshop.
Entendiendo la vista previa
A la derecha de los controles de los botones está la vista previa de lo que estás creando. No parece mucho en este momento, pero mejorará a medida que avancemos.
Tenga en cuenta que han cubierto todas las bases aquí y le permiten diseñar los estados normal, activo y activo. Por defecto, nuestras acciones afectarán el estado normal, simplemente hacemos clic en uno de los otros estados para apuntarlo específicamente. ¿El final? versión es un botón en vivo que puede usar para evaluar e interactuar con su diseño.
Sombra de la caja
Los siguientes son los controles de la caja de sombra. Estos son lo suficientemente simples y le permiten ingresar rápidamente valores para el desplazamiento, el desenfoque, la propagación, etc. Luego, elige su color e incluso puede alternar la opción de inserción para las sombras internas. Mi única decepción aquí es que no parece que pueda configurar la sombra utilizando un valor rbga, que es mi método preferido para que el fondo se vea.
Dimensiones de los botones
Ahora es el momento de darle a nuestro botón alguna sustancia. En esta sección puede establecer un tamaño estático y agregar márgenes / relleno para agregar peso a su botón. También puedes redondear las esquinas con un radio de borde. Cada una de estas opciones le permite ser tan específico como quiera, por lo que, por ejemplo, puede elegir configurar el margen del borde para que sea el mismo en todos los lados o diferente para cada esquina.
Después de este paso, podemos ver que nuestro botón se ve mucho más como, bueno, ¡un botón!
Propiedades de fuente
A continuación tenemos algunos controles para configurar nuestro texto y estilos de sombra de texto. Realmente aprecio poder establecer no solo la fuente, sino también la pila de fuentes. Esto muestra que el desarrollador tenía programadores en mente al construir esta herramienta.
Después de este paso, nuestro botón se ve bastante afilado. Hemos configurado casi todo lo que necesitamos para un botón básico (también puede ingresar y establecer una transición si lo desea).
Hover y activo
Después de obtener mi estado de botón normal exactamente como lo quiero, es hora de volver atrás y agregar la configuración para mis estados activo y activo. Tomé la ruta predecible de hacer que el botón fuera un poco más liviano al pasar el cursor y revertir el gradiente para simular una presión activa.
Una vez que hayamos terminado, obtendremos una buena cantidad de CSS para colocar en nuestro código. Es una gran parte del código, pero todo lo que hago es mío y, en su mayoría, es el resultado de todos esos locos prefijos de navegador que tienes que usar para lograr gradientes y sombras. Cuando veo todo el código necesario para este simple botón, se hace evidente cuánto tiempo me ahorró esta pequeña herramienta. Soy más que capaz de crear este botón a mano, pero me tomaría varios minutos, era mucho más rápido usando los controles WYSIWYG aquí.
A partir de una plantilla
Ahora que hemos pasado la ruta de bricolaje, volvamos al principio y tomemos la otra opción: comenzar desde una plantilla. Al hacer clic en ese enlace, irá a la página de plantillas donde actualmente hay cinco ejemplos de botones súper elegantes para elegir.
Modificando la plantilla
Para comenzar, elegí comenzar desde el "Botón de descarga verde sexy". modelo. Elegir una opción lo lleva al mismo generador que vimos antes, la única diferencia es que ahora está rellenado previamente con la configuración adecuada para crear el botón a continuación.
Es realmente bueno tener esa base sólida ya construida, desde aquí solo es cuestión de personalizar los valores que te gustaría cambiar.Por ejemplo, comenzando con el botón de arriba, fui y cambié solo las propiedades de radio de borde y sombra de cuadro y pude rápidamente sacar mi propio botón falso 3D único.
¿Vale la pena intentarlo?
Sé lo que muchos de ustedes están pensando, y yo estoy con ustedes. Soy un nerd total que ama tanto el arte como la ciencia de CSS, así que en realidad disfrutar Codificando este tipo de cosas a mano. Dicho esto, no puedo dejar de apreciar una utilidad que realmente me puede ahorrar tiempo, y esta es una de esas herramientas. Más allá de eso, no siempre sé lo que quiero en un botón cuando empiezo a crearlo y es bueno tener algunas herramientas visuales para experimentar y modificar hasta que encuentre algo que me gusta.
CSS Button todavía está en beta, así que me encontré con un error o dos. Por ejemplo, cuando escribe un color a mano y luego hace clic en el selector de color más adelante para modificarlo, encontrará que el selector de color no se actualiza para reflejar la entrada manual.
Sin embargo, aparte de algunas peculiaridades muy pequeñas, esta es una utilidad sólida que planeo agregar a mi caja de herramientas CSS3 cada vez mayor. Como mencioné anteriormente, hay mucho acerca de esta aplicación que hace evidente que fue creada teniendo en cuenta a los programadores. Tengo una impresionante cantidad de flexibilidad para hacer todas las cosas que normalmente haría a mano, simplemente están en un formato que es un poco más fácil de seguir.
¿Qué piensas? ¿Disfruta de las herramientas que tienen como objetivo ayudarlo a realizar tareas complejas un poco más fácil o prefiere la ruta purista de solo la codificación manual?