Must Have Buttons For A Profesional Website
Nice buttons can make half the deal, on a great website. There are a few factors that you have to keep in consideration, for example keeping the W3CSS conform. This means, that we either
make a div, and wrap an a tag around the text, so we can link it to another page/action, or we work with a span as a base, and wrap an a tag around the span. This would end up W3CSS valid.
To get one of the buttons that you like, simply copy the div element, and grab each of the necessary classes specified in the container. Maybee also check out a few great tips on mobile webdesign right here.
Color-Hue Change On Hover
Here we quite simply added a filter which rotates our hue when hovering over the container. It is called hue-rotate, for which you state how many degrees it should rotate. You can imagine a circle of colors, and rotating it 180deg would end up being the opposite color. Rotating by 360deg would end up being the same color as you started with.
Cranking Up The Saturation!
Changing the saturation on an element, is as easy as adding the filter for saturation. Two lines and you are set to go. Have a closer look at the .color_sat_hov class in the CSS. We could have used saturation 50% to reduce it by half, but doubling the satturation seemed like a better call. We recommend checking out bttn.css for a load of different and stylish buttons!
The Brighter, The Better!
No. But depending on your website, lowering the brightness filter, or turning it up to 120% like we did, may give you the desired effect.
While you are here you might want to have a look at a few great fonts which we picked. The fonts look awesome on a modern homepage and add a great touch of professionality when used correctly.