{"id":24176942,"url":"https://github.com/danieldafoe/splendid","last_synced_at":"2025-09-20T22:31:16.928Z","repository":{"id":27358491,"uuid":"30833829","full_name":"danieldafoe/splendid","owner":"danieldafoe","description":"A delightful little CSS library to add flair to your HTML buttons.","archived":false,"fork":false,"pushed_at":"2015-02-18T02:16:27.000Z","size":176,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-13T03:53:51.548Z","etag":null,"topics":["css","css-library","demo","library"],"latest_commit_sha":null,"homepage":null,"language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/danieldafoe.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-02-15T16:49:46.000Z","updated_at":"2015-02-19T13:43:45.000Z","dependencies_parsed_at":"2022-07-18T10:48:47.136Z","dependency_job_id":null,"html_url":"https://github.com/danieldafoe/splendid","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/danieldafoe/splendid","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danieldafoe%2Fsplendid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danieldafoe%2Fsplendid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danieldafoe%2Fsplendid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danieldafoe%2Fsplendid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/danieldafoe","download_url":"https://codeload.github.com/danieldafoe/splendid/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danieldafoe%2Fsplendid/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":276169305,"owners_count":25596952,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-20T02:00:10.207Z","response_time":63,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","css-library","demo","library"],"created_at":"2025-01-13T03:54:01.810Z","updated_at":"2025-09-20T22:31:16.671Z","avatar_url":"https://github.com/danieldafoe.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"#Splendid.css\n\u003cp\u003eCreated by \u003ca href=\"http://danieldafoe.com\"\u003eDaniel Dafoe\u003c/a\u003e\u003c/p\u003e\n\u003cp\u003eInspired by \u003ca href=\"https://github.com/IanLunn/Hover\"\u003eHover.css\u003c/a\u003e by Ian Lunn \n\u003cp\u003eSplendid.css is a small CSS library of hover effecrs to give your HTML buttons a little more life.\u003c/p\u003e\n\u003ch2\u003eLicense\u003c/h2\u003e\n\u003cp\u003eMIT Licensed; so about as free as a penny you find on the ground.\u003c/p\u003e\n\u003ch2\u003eDemo\u003c/h2\u003e\n\u003cp\u003eIf you'd like to try before you buy (don't worry, it's free), view the live demo \u003ca href=\"http://splendid.danieldafoe.com\"\u003ehere\u003c/a\u003e.\u003c/p\u003e\n\u003ch2\u003eBasics\u003c/h2\u003e\n\u003cp\u003e\n\tTo begin using Splendid.css, you're going to want to download the \u003ccode\u003e.zip\u003c/code\u003e file from \u003ca href=\"https://github.com/danieldafoe/splendid\" target=\"_blank\"\u003ehere\u003c/a\u003e. This file will include\n\t a \u003ccode\u003e.scss\u003c/code\u003e file (for the fellow SASS lovers), a normal \u003ccode\u003e.css\u003c/code\u003e stylesheet, as well as a \u003ccode\u003e.min.css\u003c/code\u003e - a minified, production-ready version.\n\u003c/p\u003e\n\u003cstrong\u003eSo is it working yet?\u003c/strong\u003e\n\u003cp\u003e\n\tGadzooks! Slow down there. To begin, include this line inbetween the \u003ccode\u003e\u0026lt;head\u0026gt;\u003c/code\u003e tags\n\tof your HTML file:\u003cbr/\u003e\n\t\u003ccode\u003e\u0026lt;link href=\"your-css-folder/splendid.css\" rel=\"stylesheet\"/\u0026gt;\u003c/code\u003e\n\u003c/p\u003e\n\u003cp\u003e\n\tNext, you'll want to make sure that either the \u003ccode\u003esplendid.css\u003c/code\u003e or \u003ccode\u003esplendid.min.css\u003c/code\u003e file is indeed in that directory path. The \u003ccode\u003esplendid.scss\u003c/code\u003e file is for advanced users only. If you are familiar with SASS (\u003ca href=\"http://sass-lang.com\" target=\"_blank\"\u003ewebsite\u003c/a\u003e) and want to improve upon the original stylesheet, then this file is for you.\n\u003c/p\u003e\n\u003ch2\u003eGetting Started\u003c/h2\u003e\n\u003cp\u003e\n\tTo start using Splendid.css, you'll want to start by attaching one of the many classes to one of your \u003ccode\u003e\u0026lt;button\u0026gt;\u003c/code\u003e or \u003ccode\u003e\u0026lt;a\u0026gt;\u003c/code\u003e elements.\n\u003c/p\u003e\n\u003cp\u003e\n\tThe first class you'll want to add is \u003ccode\u003e.spl-btn\u003c/code\u003e. 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.\n\u003c/p\u003e\n\u003ch2\u003eHover Effects\u003c/h2\u003e\n\u003cp\u003e\n\tUsing 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 \u003ccode\u003e.spl-btn\u003c/code\u003e 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.\n\u003c/p\u003e\n\u003cp\u003e\n\u003ccode\u003e\u0026lt;a href=\"\" class=\"spl-btn spl-btn-royal spl-lines-full\"\u0026gt;spl-lines-full\u0026lt;/a\u0026gt;\u003c/code\u003e\n\u003c/p\u003e\n\u003cp\u003e\n\tThe 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. \u003ccode\u003e.spl-btn-royal\u003c/code\u003e was the colour used in the example. The effect that was used is the last class on the element, \u003ccode\u003e.spl-lines-full\u003c/code\u003e. That's the class that does the heavy lifting. \n\u003c/p\u003e\n\u003cp\u003e\n\tIf you don't want to use the preset colour for your own buttons, you don't have to \u0026#8212; but you'll need to override the \u003ccode\u003e.spl-btn\u003c/code\u003e class with your desired \u003ccode\u003ebackground-color\u003c/code\u003e. Further, you may need to change the CSS \u003ccode\u003ecolor\u003c/code\u003e style of your button's text, or, in some cases, a \u003ccode\u003eborder-color\u003c/code\u003e.\n\u003c/p\u003e\n\u003ch2\u003eQuestions\u003c/h2\u003e\n\u003cp\u003e\n\tPlease direct any comments or questions you have via \u003ca href=\"https://twitter.com/danieldafoe\"\u003etwitter\u003c/a\u003e or \u003ca href=\"mailto:hello@danieldafoe.com\" target=\"blank\"\u003eemail\u003c/a\u003e.\n\u003c/p\u003e\n\u003cstrong\u003e\n\tFin.\n\u003c/strong\u003e\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdanieldafoe%2Fsplendid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdanieldafoe%2Fsplendid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdanieldafoe%2Fsplendid/lists"}