You can also provide a 3d effect by using a graduated fill - light at the top dark at the bottom -as the button's background. The only problem with this is that the graduated fill wasn't initially supported in a standard way across all browsers so there are vendor specific tags as well as the current standard tag.
For example, for a Mozilla based browser such as Firefox we need:
Now we have a button that looks like a button but it doesn't seem to do anything when you click it. It doesn't "go in" when clicked.
We can fix this with a state selector.
These are more property called the user action pseudo-classes. Notice that the addition of such pseudo -classes to the selector mechanism makes CSS so much more than an object initialization language. Now the look of an object can change as the result of a user interaction - CSS is now defining behavior.
The only difficult part of this is working out how to change the appearance of the button to signify that it has been pressed. There are many ways of doing this but they all involve giving the impression of a shadow that appears as the button is pushed in. One of the simplest ways of doing this is to reverse the gradient fill so that it is dark at the top and lighter at the bottom. Using this method with CSS gives:
The active selector applies that style when the user is interacting with the object by pressing the mouse button down. This creates a reasonable button press animation.
A slightly better effect is to produce a shadow around the entire rim of the button area:
Once you realize the power of CSS to customize the UI you simply have to take it seriously. CSS is the important part of the technology. After all, when a <a> tag can represent any clickable element of the UI, what hope is there for semantic HTML in app design?
You also need to be aware that this entire customization could have been done in JavaScript by manipulating the CSS in code.
There is more to the interaction between JavaScript and the CSS than meets the eye.
The offspring of that partnership is pg_duckdb, an extension that embeds the DuckDB engine into the PostgreSQL database, allowing it to handle analytical workloads.
A few months ago the OpenAI .NET library was released as a beta. It has now reached version 2.0.0 and the time has come to leave beta and, with a few amendments enter production readiness.
