Have you ever wanted to see some cool buttons? This is my button warehouse, where I make buttons! Some buttons look like buttons from other websites, but with some simple tricks I'm making them more tactile without sacrificing sleekness.
I love the web buttons of old, which were blockier and more tactile--reminiscent of a physical button. Nowadays web buttons are flattened, which is sleek and conforms to modern touchscreen standards but is aesthetically displeasing compared to older, more textured buttons. My aim is to merge the two styles, keeping the sleekness of the latter while maintaining the tactility and weight of the former.
To do this, I use a colored drop shadow while hovering over the button to create a sort of light beneath the button, and increase the opacity of the drop shadow on press. Using a fainter, more diffuse box shadow on hover and a small bright box shadow on click creates the illusion of a light underneath the button being pushed closer to the "surface" of the webpage. I conceptualize the sensation of clicking as akin to stepping on a hoverboard: your weight pushes the floating object down, but it resists gravity like two magnets of the same pole.
Analog-adjacent buttons are the past. Flat buttons are the present. Hoverboard buttons are the future.
Usual rules of button-pressing sleekness apply. I bias towards borders in my buttons, as I find them endemic of the analog style, creating depth and shadow. I like to play with colors of text and backgrounds, as well as shadow and border. Buttons inherently follow a three act structure--they tell a story. You see it, you hover over it, you press it. Set-up, tension, release. I try to tell a little story with every button.
1 2 3 4 5
What are you doing down here? Searching for a better website? Fine, here you go.