#Splendid.css
Created by Daniel Dafoe
Inspired by Hover.css by Ian Lunn
Splendid.css is a small CSS library of hover effecrs to give your HTML buttons a little more life.
MIT Licensed; so about as free as a penny you find on the ground.
If you'd like to try before you buy (don't worry, it's free), view the live demo here.
To begin using Splendid.css, you're going to want to download the .zip file from here. This file will include
a .scss file (for the fellow SASS lovers), a normal .css stylesheet, as well as a .min.css - a minified, production-ready version.
Gadzooks! Slow down there. To begin, include this line inbetween the <head> tags
of your HTML file:
<link href="your-css-folder/splendid.css" rel="stylesheet"/>
Next, you'll want to make sure that either the splendid.css or splendid.min.css file is indeed in that directory path. The splendid.scss file is for advanced users only. If you are familiar with SASS (website) and want to improve upon the original stylesheet, then this file is for you.
To start using Splendid.css, you'll want to start by attaching one of the many classes to one of your <button> or <a> elements.
The first class you'll want to add is .spl-btn. This is the class that adds the right look and feel of a Splendid button. You can overwrite these CSS rules to fit your own idea of what a button should look like, but if you prefer to keep your hands clean, then use this.
Using the hover effects that you've seen on the home page is as easy as adding a class to your element that already has the .spl-btn class. To figure out what the class name is of the hover effect you want, simply check out the text within the button that you hovered over. The name you see is the class you'll want to append to your element in order to get that effect.
<a href="" class="spl-btn spl-btn-royal spl-lines-full">spl-lines-full</a>
The code above is the exact code that was used to generate a button. As you can see, Splendid.css even comes with a colour preset for your convenience. .spl-btn-royal was the colour used in the example. The effect that was used is the last class on the element, .spl-lines-full. That's the class that does the heavy lifting.
If you don't want to use the preset colour for your own buttons, you don't have to — but you'll need to override the .spl-btn class with your desired background-color. Further, you may need to change the CSS color style of your button's text, or, in some cases, a border-color.
Please direct any comments or questions you have via twitter or email.
Fin.