The Button Project


This program lets you define and alter multiple layers of graphical objects made from pure CSS. This gives resolution independence (no "jaggies" or pixels at any magnification) and is of course hundreds if not thousands of times smaller in size to render an equivalent GIF, PNG or JPG file.

I wrote a demo program to get a feel for how the thing might work and stopped - it wasn't a program that could be expanded or finished, it was just a lot of demo code strung together. But, given the experience I can now generalize what this program does both in syntax and operation such that a rewrite is now prudent.

Why
It saves cpu cycles, transit costs and time.

It makes your website load more quickly. Here's how.
How
Multiple layers of radial gradient matrix transforms.

It's just math. The amount and complexity of what you need to do to build one of these things in html and css is large and does not lend itself well to the artisinal approach, it needs to be machine generated and this proposed program will do that; at some point the syntax will be abstracted to a higher level. Later.

The resultant JavaScript code (no libraries! no "frameworks"!) will be open source and available to use online, free.

Click to see what makes up one of these CSS shaded buttons. Click the "back" button when you're done.

Large purple button.

I had a row of lights in a program and they were always an issue when the code changed for computing resources (i.e. domain name) altered. This is a non issue when you draw the button with html/css instead of referencing a file on some server and paying for the overhead in terms of bytes of storage and network traffic and network access costs and inherent delays you simply draw it instead.
Small, green button.

I wrote a quick hack entirely in JavaScript that is something of an objects based editing program for CSS shapes. In layers. With a fancy ui. It needs to be a real product, the code I have was an R&D testbed to try certain things to see how feasible this might be.