After recently reading the W3Schools Chapter on HTML Forms, I thought to myself, "Hey, you know what would be neat for my next project, creating a sheet of lovely looking log-in designs." It's gotten to a stage now where I, unashamedly, find that kind of idea just plain tasty.
I found what I would loosely describe as a tutorial on Codrops, Creative Button Styles. You're supplied with the CSS and the Javascript and, to be honest, it was pretty much all Javascript and therefore very irrelevant to what I'm currently learning (one step at a time, am I right?), but I liked the idea and rolled with it.
If you're interested Colour Lovers is where I found all of these delicious colour schemes. From top to bottom: Odd but Trendy, Pink Parrot, Blue Kitten, none, Sand & Bikini.
In the first example, you can see a fade transition between blue to purple on hover. I achieved this by setting opacity: 1; within the button class, then adding a transition on hover:
button:hover.btn-1 {
transition: .XXs ease-in-out;
background-color: purple;
}
The .XXs specifies how long in seconds you wish the transition to take, and the ease-in-out property specifics it should be a steady and linear fade. To eliminate any fade transitions when active - as this can look a little messy - simply set the opacity back to 1 with a 0s transition time:
button:active.btn-1 {
opacity: 1;
transition: .0s;
}
This is followed by 3 simple designs of simply changing the colour of the box, borders and text on hover. While this relies heavily on the palette, these simple hover changes can feel very responsive and demonstrate clearly to the user that they are interactable elements. While it may be a little overkill in this demonstration, it still has a juiciness to it.
In the final example, I tried to make the buttons appear as though they were being pressed down on hover then on click, as in the first Codrops example (but remember, there's no Javascript here yet). Therefore, I just played around with reducing the sizes of the top and bottom borders to give the illusion it was being pressed in. Let's look how that's coded:
.btn-5 {
border-bottom: 4px solid #7391b6;
border-top: 2px solid #4ed4d8;
padding-top: 3px;
}
button:hover.btn-5 {
border-bottom: 2px solid #7391b6;
border-top: 4px solid #f0e3f2;
padding-top: 0px;
}
button:active.btn-5 {
border-bottom: 0px solid #7391b6;
border-top: 6px solid #f0e3f2;
}
First up, when :active, visually the element shifts, so there's some code needed there that I haven't yet got to the bottom of.
What's happened here, is we have three different colours: #7391b6 (dark blue), #4ed4d8 (blue) and #f0e3f2 (pink). The background colour is pink, so when defining the button, we add an "invisible" blue border (the same colour as the button itself) to the top of 2px, meaning, when we hover we make that top border bigger at 4px and change its colour to pink, so it appears as though the button has moved down 4px even though the top border has actually increased in size. We have simultaneously reduced the bottom border (dark blue, to make it appear 3D) to give the impression the button is now inset. The padding keeps the elements locked in position when their border sizes are shifting.
It's important to do the maths here, making sure to flip the top and bottom border pixel values and add the necessary amount of padding.
Again, this is far from perfect, but if you want to try it for yourself, or see exactly what I did here, you can find the code here:
