/* * littlelink.io * Skeleton V2.0.4 * Copyright 2014, Dave Gamache * www.getskeleton.com * Free to use under the MIT license. * http://www.opensource.org/licenses/mit-license.php * 12/29/2014 */ /* * Built using on: * Skeleton V2.0.4 * Copyright 2014, Dave Gamache * www.getskeleton.com * Free to use under the MIT license. * http://www.opensource.org/licenses/mit-license.php * 12/29/2014 */ /* Table of contents –––––––––––––––––––––––––––––––––––––––––––––––––– - Buttons - Brand Styles */ /* Buttons –––––––––––––––––––––––––––––––––––––––––––––––––– */ .button, button { display: inline-block; text-decoration: none; height: 48px; text-align: center; vertical-align: middle; font-size: 18px; width: 300px; font-weight: 700; line-height: 48px; letter-spacing: 0.1px; white-space: wrap; border-radius: 8px; cursor: pointer; } button:hover, .button:focus { color: #333333; border-color: #888888; outline: 0; } .button.button-primary { color: #ffffff; filter: brightness(90%); } .button.button-primary:hover, .button.button-primary:focus { color: #ffffff; filter: brightness(90%); } /* Brand Icons –––––––––––––––––––––––––––––––––––––––––––––––––– */ .icon { padding: 0px 8px 3.5px 0px; vertical-align: middle; width: 20px; height: 20px; } /* Brand Styles (we recommend adding these in alphabetical order) –––––––––––––––––––––––––––––––––––––––––––––––––– */ /* Extended (this is great for your own brand color!) */ .button.button-extended { color: #ffffff; background-color: #0085ff; } .button.button-extended:hover, .button.button-extended:focus { filter: brightness(90%); } /* 500px */ .button.button-500px { color: #000000; background-color: #ffffff; } .button.button-500px:hover, .button.button-500px:focus { filter: brightness(90%); } /* Alpha Universe (Sony) */ .button.button-alphauniverse { color: #ffffff; background-color: #000000; } .button.button-alphauniverse:hover, .button.button-alphauniverse:focus { filter: brightness(90%); } /* Anilist */ .button.button-anilist { color: #ffffff; background-color: #152232; } .button.button-anilist:hover, .button.button-anilist:focus { filter: brightness(90%); } /* Behance */ .button.button-behance { color: #1769ff; background-color: #ffffff; } .button.button-behance:hover, .button.button-behance:focus { filter: brightness(90%); } /* Codepen */ .button.button-codepen { color: #000000; background-color: #ffffff; } .button.button-codepen:hover, .button.button-codepen:focus { filter: brightness(90%); } /* Deezer */ .button.button-deezer { color: #ffffff; background-color: #181818; } .button.button-deezer:hover, .button.button-deezer:focus { filter: brightness(90%); } /* Deezer Alt */ .button.button-deezer-alt { color: #ffffff; background-color: #181818; } .button.button-deezer-alt:hover, .button.button-deezer-alt:focus { filter: brightness(90%); } /* Devpost */ .button.button-devpost { color: #ffffff; background-color: #003E54; } .button.button-devpost:hover, .button.button-devpost:focus { filter: brightness(90%); } /* Distiller */ .button.button-dist { color: #ffffff; background-color: #ed5c47; } .button.button-dist:hover, .button.button-dist:focus { filter: brightness(90%); } /* Hackerearth */ .button.button-hackerearth { color: #ffffff; background-color: #2b3352; } .button.button-hackerearth:hover, .button.button-hackerearth:focus { filter: brightness(90%); } /* Hackerrank */ .button.button-hackerrank { color: #000000; background-color: #ffffff; } .button.button-hackerrank:hover, .button.button-hackerrank:focus { filter: brightness(90%); } /* itch.io */ .button.button-itchio { color: #ffffff; background-color: #fa5c5c; } .button.button-itchio:hover, .button.button-itchio:focus { filter: brightness(90%); } /* Lemmy */ .button.button-lemmy { color: #ffffff; background-color: #14854f; } .button.button-lemmy:hover, .button.button-lemmy:focus { filter: brightness(90%); } /* Matrix */ .button.button-matrix { color: #ffffff; border: 1px solid #ffffff; background-color: #000000; } .button.button-matrix:hover, .button.button-matrix:focus { filter: brightness(90%); } /* Micro.blog */ .button.button-microblog { color: #FFFFFF; background-color: #FD9927 } .button.button-microblog:hover, .button.button-microblog:focus { filter: brightness(90%) } /* MyAnimeList */ .button.button-myanimelist { color: #133a95; background-color: #ffffff } .button.button-myanimelist:hover, .button.button-myanimelist:focus { filter: brightness(90%) } /* OP.GG */ .button.button-opgg { color: #ffffff; background-color: #5383E8} .button.button-opgg:hover, .button.button-opgg:focus { filter: brightness(90%) } /* ORCID ID */ .button.button-orcid-id { color: #000000; background-color: #FFFFFF; border: 1px solid #212121; } .button.button-orcid-id:hover, .button.button-orcid-id:focus { filter: brightness(90%); } /* osu! */ .button.button-osu { color: #ffffff; background-color: #ff8ee6; } .button.button-osu:hover, .button.button-osu:focus { filter: brightness(90%); } /* Qobuz */ .button.button-qobuz { color: #ffffff; background-color: #000000; } .button.button-qobuz:hover, .button.button-qobuz:focus { filter: brightness(90%); } /* ResearchGate */ .button.button-researchgate { color: #000000; background-color: #FFFFFF; border: 1px solid #212121; } .button.button-researchgate:hover, .button.button-researchgate:focus { filter: brightness(90%); } /* SpaceHey */ .button.button-spacehey { color: #FFFFFF; background-color: #3234CF; } .button.button-spacehey:hover, .button.button-spacehey:focus { filter: brightness(90%); } /* Tidal */ .button.button-tidal { color: #ffffff; background-color: #000000; } .button.button-tidal:hover, .button.button-tidal:focus { filter: brightness(90%); } /* Vero */ .button.button-vero { color: #ffffff; background-color: #000000 } .button.button-vero:hover, .button.button-vero:focus { filter: brightness(90%) } /* Pixelfed */ .button.button-pixelfed { color: #000000; background-color: #ffffff } .button.button-pixelfed:hover, .button.button-pixelfed:focus { filter: brightness(90%) } /* write.as */ .button.button-writeas { color: #000000; border: 1px solid #000000; background-color: #ffffff; } .button.button-writeas:hover, .button.button-writeas:focus { filter: brightness(90%); } /* writefreely */ .button.button-writefreely { color: #000000; border: 1px solid #000000; background-color: #f4f4f4; } .button.button-writefreely:hover, .button.button-writefreely:focus { filter: brightness(90%); }