/* * 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: 100%; text-align: center; vertical-align: middle; font-size: 18px; width: 300px; font-weight: 700; line-height: 20px; padding: 14px 12px 12px 12px; letter-spacing: 0.1px; white-space: wrap; outline: none; border-radius: 8px; cursor: pointer; } button:hover, .button:focus { color: #212121; border-color: #888; outline: #7AB8FF solid 3px } .button.button-primary { color: #fff; filter: brightness(90%); } .button.button-primary:hover, .button.button-primary:focus { color: #fff; filter: brightness(90%); } /* Brand Icons –––––––––––––––––––––––––––––––––––––––––––––––––– */ .icon { padding: 0px 8px 3.5px 0px; vertical-align: middle; width: 20px; height: 20px; } /* Brand Styles –––––––––––––––––––––––––––––––––––––––––––––––––– */ /* Default (this is great for your own brand color!) */ .button.button-default { color: #ffffff; background-color: #2457F5; } .button.button-default:hover, .button.button-default:focus { filter: brightness(90%); } /* Amazon */ .button.button-amazon { color: #000000; background-color: #FFFFFF; border: 1px solid #212121; } .button.button-amazon:hover, .button.button-amazon:focus { filter: brightness(90%); } /* Amazon Music */ .button.button-amazon-music { color: #000000; background-color: #25D1DA; } .button.button-amazon-music:hover, .button.button-amazon-music:focus { filter: brightness(90%); } /* Apple App Store */ .button.button-appstore { color: #FFFFFF; background-color: #000000; border: 1px solid #FFFFFF; } .button.button-appstore:hover, .button.button-appstore:focus { filter: brightness(90%); } /* Apple Music */ .button.button-apple-music { color: #ffffff; background-color: #000000; border: 1px solid #FFFFFF; } .button.button-apple-music:hover, .button.button-apple-music:focus { filter: brightness(90%); } /* Apple Music Alt */ .button.button-apple-music-alt { color: #ffffff; background-image: linear-gradient(to bottom, #FB5C74, #FA233B); } .button.button-apple-music-alt:hover, .button.button-apple-music-alt:focus { filter: brightness(90%); } /* Apple Podcasts */ .button.button-apple-podcasts { color: #ffffff; background-color: #000000; border: 1px solid #FFFFFF; } .button.button-apple-podcasts:hover, .button.button-apple-podcasts:focus { filter: brightness(90%); } /* Apple Podcasts Alt */ .button.button-apple-podcasts-alt { color: #ffffff; background-image: linear-gradient(to bottom, #F452FF, #832BC1); } .button.button-apple-podcasts-alt:hover, .button.button-apple-podcasts-alt:focus { filter: brightness(90%); } /* ArtStation */ .button.button-artstation { color: #ffffff; background-color: #18181C; border: 1px solid #FFFFFF; } .button.button-artstation:hover, .button.button-artstation:focus { filter: brightness(90%); } /* Bandcamp */ .button.button-bandcamp { color: #ffffff; background-color: #1d9fc3; } .button.button-bandcamp:hover, .button.button-bandcamp:focus { filter: brightness(90%); } /* Behance */ .button.button-behance { color: #ffffff; background-color: #0057FF; } .button.button-behance:hover, .button.button-behance:focus { filter: brightness(90%); } /* BeReal */ .button.button-bereal { color: #ffffff; background-color: #121212; border: 1px solid #ffffff; } .button.button-bereal:hover, .button.button-bereal:focus { filter: brightness(90%); } /* Bluesky */ .button.button-bluesky { color: #000000; background-color: #F3F9FF; border: 1px solid #212121; } .button.button-bluesky:hover, .button.button-bluesky:focus { filter: brightness(90%); } /* Buy Me a Coffee */ .button.button-coffee { color: #000000; background-color: #ffdd00; } .button.button-coffee:hover, .button.button-coffee:focus { filter: brightness(90%); } /* Cal.com */ .button.button-cal { color: #FFFFFF; background-color: #292929; border: 1px solid #FFFFFF; } .button.button-cal:hover, .button.button-cal:focus { filter: brightness(90%); } /* Calendly */ .button.button-calendly { color: #FFFFFF; background-color: #006BFF; } .button.button-calendly:hover, .button.button-calendly:focus { filter: brightness(90%); } /* Cash App */ .button.button-cash-app { color: #ffffff; background-image: linear-gradient(to bottom, #00d64b, #00c244); } .button.button-cash-app:hover, .button.button-cash-app:focus { filter: brightness(90%); } /* Clubhouse */ .button.button-clubhouse { color: #1F1F1A; background-color: #F1EFE3; border: 1px solid #212121; } .button.button-clubhouse:hover, .button.button-clubhouse:focus { filter: brightness(90%); } /* dev.to */ .button.button-dev-to { color: #000000; background-color: #f5f5f5; border: 1px solid #212121; } .button.button-dev-to:hover, .button.button-dev-to:focus { filter: brightness(90%); } /* Discord */ .button.button-discord { color: #ffffff; background-color: #5865f2; } .button.button-discord:hover, .button.button-discord:focus { filter: brightness(90%); } /* Dribbble */ .button.button-dribbble { color: #000000; background-color: #FFFFFF; border: 1px solid #212121; } .button.button-dribbble:hover, .button.button-dribbble:focus { filter: brightness(90%); } /* Etsy */ .button.button-etsy { color: #ffffff; background-color: #F45800; } .button.button-etsy:hover, .button.button-etsy:focus { filter: brightness(90%); } /* Facebook */ .button.button-faceb { color: #ffffff; background-color: #1877f2; } .button.button-faceb:hover, .button.button-faceb:focus { filter: brightness(90%); } /* Facebook Messenger */ .button.button-messenger { color: #ffffff; background-image: linear-gradient( 25deg, #0099ff, #5f5dff, #a033ff, #c740cc, #ff5280, #ff7061 ); } .button.button-messenger:hover, .button.button-messenger:focus { filter: brightness(90%); } /* Figma */ .button.button-figma { color: #ffffff; background-color: #000000; border: 1px solid #FFFFFF; } .button.button-figma:hover, .button.button-figma:focus { filter: brightness(90%); } /* Fiverr */ .button.button-fiverr { color: #ffffff; background-color: #1DBF73; } .button.button-fiverr:hover, .button.button-fiverr:focus { filter: brightness(90%); } /* Flickr */ .button.button-flickr { color: #ffffff; background-color: #000000; border: 1px solid #FFFFFF; } .button.button-flickr:hover, .button.button-flickr:focus { filter: brightness(90%); } /* GitHub */ .button.button-github { color: #ffffff; background-color: #000000; border: 1px solid #FFFFFF; } .button.button-github:hover, .button.button-github:focus { filter: brightness(90%); } /* GitLab */ .button.button-gitlab { color: #ffffff; background-color: #6151b2; } .button.button-gitlab:hover, .button.button-gitlab:focus { filter: brightness(90%); } /* GoFundMe */ .button.button-gofundme { color: #ffffff; background-color: #02A95C; } .button.button-gofundme:hover, .button.button-gofundme:focus { filter: brightness(90%); } /* Goodreads */ .button.button-goodreads { color: #333333; background-color: #f3f1e6; border: 1px solid #212121; } .button.button-goodreads:hover, .button.button-goodreads:focus { filter: brightness(90%); } /* Google Black */ .button.button-google-black { color: #FFFFFF; background-color: #000000; border: 1px solid #FFFFFF; } .button.button-google-black:hover, .button.button-google-black:focus { filter: brightness(90%); } /* Google Play Store */ .button.button-playstore { color: #FFFFFF; background-color: #000000; border: 1px solid #FFFFFF; } .button.button-playstore:hover, .button.button-playstore:focus { filter: brightness(90%); } /* Google Podcasts */ .button.button-google-podcasts { color: #000000; background-color: #FFFFFF; border: 1px solid #212121; } .button.button-google-podcasts:hover, .button.button-google-podcasts:focus { filter: brightness(90%); } /* Google Scholar */ .button.button-google-scholar { color: #000000; background-color: #FFFFFF; border: 1px solid #212121; } .button.button-google-scholar:hover, .button.button-google-scholar:focus { filter: brightness(90%); } /* Guilded */ .button.button-guilded { color: #000000; background-color: #F5C400; } .button.button-guilded:hover, .button.button-guilded:focus { filter: brightness(90%); } /* Hashnode */ .button.button-hashnode { color: #000000; background-color: #ffffff; border: 1px solid #212121; } .button.button-hashnode:hover, .button.button-hashnode:focus { filter: brightness(90%); } /* Instagram */ .button.button-instagram { color: #ffffff; background-image: linear-gradient(-135deg, #1400c8, #b900b4, #f50000); } .button.button-instagram:hover, .button.button-instagram:focus { filter: brightness(90%); } /* Kick */ .button.button-kick { background-color:#000000; color: #ffffff; border: 1px solid #ffffff; } .button.button-kick:hover { filter: brightness(90%); } /* Kick Alt */ .button.button-kick-alt { background-color:#01e701; color: #000; } .button.button-kick-alt:hover { filter: brightness(90%); } /* Kickstarter */ .button.button-kickstarter { color: #ffffff; background-color: #05ce78; } .button.button-kickstarter:hover, .button.button-kickstarter:focus { filter: brightness(90%); } /* Kit */ .button.button-kit { color: #ffffff; background-color: #000000; border: 1px solid #FFFFFF; } .button.button-kit:hover, .button.button-kit:focus { filter: brightness(90%); } /* Ko-fi */ .button.button-ko-fi { color: #ffffff; background-color: #13C3FF; } .button.button-ko-fi:hover, .button.button-ko-fi:focus { filter: brightness(90%); } /* Last.fm */ .button.button-last-fm { color: #ffffff; background-color: #D51007; } .button.button-last-fm:hover, .button.button-last-fm:focus { filter: brightness(90%); } /* Letterboxd */ .button.button-letterboxd { color: #ffffff; background-color: #2c3440; border: 1px solid #FFFFFF; } .button.button-letterboxd:hover, .button.button-letterboxd:focus { filter: brightness(90%); } /* Line */ .button.button-line { color: #FFFFFF; background-color: #06C755; } .button.button-line:hover, .button.button-line:focus { filter: brightness(90%); } /* LinkedIn */ .button.button-linked { color: #ffffff; background-color: #2867b2; } .button.button-linked:hover, .button.button-linked:focus { filter: brightness(90%); } /* Mailchimp */ .button.button-mailchimp { color: #000000; background-color: #FFE01B; } .button.button-mailchimp:hover, .button.button-mailchimp:focus { filter: brightness(90%); } /* Mastodon */ .button.button-mastodon { color: #ffffff; background-color: #17063B; border: 1px solid #FFFFFF; } .button.button-mastodon:hover, .button.button-mastodon:focus { filter: brightness(90%); } /* Medium */ .button.button-medium { color: #ffffff; background-color: #000000; border: 1px solid #FFFFFF; } .button.button-medium:hover, .button.button-medium:focus { filter: brightness(90%); } /* NGL */ .button.button-ngl { color: #ffffff; background-image: linear-gradient(-45deg, #ff8d10, #ec1187); } .button.button-ngl:hover, .button.button-ngl:focus { filter: brightness(90%); } /* Notion */ .button.button-notion { color: #000000; border: 1px solid #212121; background-color: #ffffff; } .button.button-notion:hover, .button.button-notion:focus { filter: brightness(90%); } /* OnlyFans */ .button.button-onlyfans { color: #ffffff; background-color: #00AEEF; } .button.button-onlyfans:hover, .button.button-onlyfans:focus { filter: brightness(90%); } /* Partiful */ .button.button-partiful { color: #ffffff; background-color: #000000; border: 1px solid #FFFFFF; } .button.button-partiful:hover, .button.button-partiful:focus { filter: brightness(90%); } /* Patreon */ .button.button-patreon { color: #ffffff; background-color: #000000; border: 1px solid #FFFFFF; } .button.button-patreon:hover, .button.button-patreon:focus { filter: brightness(90%); } /* PayPal */ .button.button-paypal { color: #ffffff; background-color: #003087; } .button.button-paypal:hover, .button.button-paypal:focus { filter: brightness(90%); } /* Pinterest */ .button.button-pinterest { color: #000000; background-color: #ffe2eb; border: 1px solid #212121; } .button.button-pinterest:hover, .button.button-pinterest:focus { filter: brightness(90%); } /* Post.news */ .button.button-post-news { color: #ffffff; background-color: #678BFF; } .button.button-post-news:hover, .button.button-post-news:focus { filter: brightness(90%); } /* Product Hunt */ .button.button-product-hunt { color: #000000; background-color: #ffffff; border: 1px solid #212121; } .button.button-producthunt:hover, .button.button-producthunt:focus { filter: brightness(90%); } /* Read.cv */ .button.button-read-cv { color: #FFFFFF; background-color: #000000; border: 1px solid #FFFFFF; } .button.button-read-cv:hover, .button.button-read-cv:focus { filter: brightness(90%); } /* Redbubble */ .button.button-redbubble { color: #e41321; background-color: #ffffff; border: 1px solid #212121; } .button.button-redbubble:hover, .button.button-redbubble:focus { filter: brightness(90%); } /* Reddit */ .button.button-reddit { color: #FFFFFF; background-color: #FF4500; } .button.button-reddit:hover, .button.button-reddit:focus { filter: brightness(90%); } /* Revolut */ .button.button-revolut { color: #000000; background-color: #ffffff; border: 2px solid black; } .button.button-rev:hover, .button.button-rev:focus { filter: brightness(90%); } /* Shop */ .button.button-shop { color: #ffffff; background-color: #5A31F4; } .button.button-shop:hover, .button.button-shop:focus { filter: brightness(90%); } /* Signal */ .button.button-signal { color: #ffffff; background-color: #3a76f0; } .button.button-signal:hover, .button.button-signal:focus { filter: brightness(90%); } /* Skoob */ .button.button-skoob { color: #ffffff; background-color: #3189c8; } .button.button-skoob:hover, .button.button-skoob:focus { filter: brightness(90%); } /* Slack */ .button.button-slack { color: #000000; background-color: #FFFFFF; border: 1px solid #212121; } .button.button-slack:hover, .button.button-slack:focus { filter: brightness(90%); } /* Snapchat */ .button.button-snapchat { color: #000000; background-color: #fffc00; } .button.button-snapchat:hover, .button.button-snapchat:focus { filter: brightness(90%); } /* SoundCloud */ .button.button-soundcloud { color: #ffffff; background-color: #ff5500; } .button.button-soundcloud:hover, .button.button-soundcloud:focus { filter: brightness(90%); } /* Spotify */ .button.button-spotify { color: #191414; background-color: #1db954; } .button.button-spotify:hover, .button.button-spotify:focus { filter: brightness(90%); } /* Spotify Alt */ .button.button-spotify-alt { color: #FFFFFF; background-color: #191414; border: 1px solid #FFFFFF; } .button.button-spotify-alt:hover, .button.button-spotify-alt:focus { filter: brightness(90%); } /* Square */ .button.button-square { color: #FFFFFF; background-color: #006AFF; } .button.button-square:hover, .button.button-square:focus { filter: brightness(90%); } /* Steam Dark */ .button.button-steam-dark { color: #ffffff; background-image: linear-gradient(90deg, #09172a, #072a57, #0c5085); } .button.button-steam-dark:hover, .button.button-steam-dark:focus { filter: brightness(90%); } /* Steam */ .button.button-steam { color: #ffffff; background-image: linear-gradient(90deg, #08BBFF, #2B75FF); } .button.button-steam:hover, .button.button-steam:focus { filter: brightness(90%); } /* Strava */ .button.button-strava { color: #ffffff; background-color: #fc5200; } .button.button-strava:hover, .button.button-strava:focus { filter: brightness(90%); } /* Substack */ .button.button-substack { color: #ffffff; background-color: #FF6719; } .button.button-substack:hover, .button.button-substack:focus { filter: brightness(90%); } /* Telegram */ .button.button-telegram { color: #ffffff; background-color: #3faee8; } .button.button-telegram:hover, .button.button-telegram:focus { filter: brightness(90%); } /* Threads */ .button.button-threads { color: #FFFFFF; background-color: #000000; border: 1px solid #FFFFFF; } .button.button-threads:hover, .button.button-threads:focus { filter: brightness(90%); } /* Threema */ .button.button-threema { color: #000000; background-color: #3fe669; } .button.button-threema:hover, .button.button-threema:focus { filter: brightness(90%); } /* TikTok */ .button.button-tiktok { color: #ffffff; background-color: #000000; border: 1px solid #FFFFFF; } .button.button-tiktok:hover, .button.button-tiktok:focus { filter: brightness(90%); } /* Trakt */ .button.button-trakt { color: #ffffff; background-color: #ED1C24; } .button.button-trakt:hover, .button.button-trakt:focus { filter: brightness(90%); } /* Trello */ .button.button-trello { color: #ffffff; background-color: #0065ff; } .button.button-trello:hover, .button.button-trello:focus { filter: brightness(90%); } /* Tumblr */ .button.button-tumb { color: #ffffff; background-color: #131313; border: 1px solid #FFFFFF; } .button.button-tumb:hover, .button.button-tumb:focus { filter: brightness(90%); } /* Twitch */ .button.button-twitch { color: #ffffff; background-color: #9146ff; } .button.button-twitch:hover, .button.button-twitch:focus { filter: brightness(90%); } /* Twitter (archiving soon, see 'X') */ .button.button-twit { color: #ffffff; background-color: #1da1f2; } .button.button-twit:hover, .button.button-twit:focus { filter: brightness(90%); } /* Unsplash */ .button.button-unsplash { color: #000000; background-color: #ffffff; border: 1px solid #212121; } .button.button-unsplash:hover, .button.button-unsplash:focus { filter: brightness(90%); } /* Untappd */ .button.button-untappd { color: #000000; background-color: #ffc000; } .button.button-untappd:hover, .button.button-untappd:focus { filter: brightness(90%); } /* Upwork */ .button.button-upwork { color: #FFFFFF; background-color: #14A800; } .button.button-upwork:hover, .button.button-upwork:focus { filter: brightness(90%); } /* Venmo */ .button.button-venmo { color: #ffffff; background-color: #008CFF; } .button.button-venmo:hover, .button.button-venmo:focus { filter: brightness(90%); } /* Vimeo */ .button.button-vimeo { color: #ffffff; background-color: #1ab7ea; } .button.button-vimeo:hover, .button.button-vimeo:focus { filter: brightness(90%); } /* VRChat */ .button.button-vrchat { color: #000000; background-color: #ffffff; border: 1px solid black; } .button.button-vrchat:hover, .button.button-vrchat:focus { filter: brightness(90%); } /* VSCO */ .button.button-vsco { color: #FFFFFF; background-color: #000000; border: 1px solid #FFFFFF; } .button.button-vsco:hover, .button.button-vsco:focus { filter: brightness(90%); } /* Website */ .button.button-web { color: #ffffff; background-color: #000000; border: 1px solid #FFFFFF; } .button.button-web:hover, .button.button-web:focus { filter: brightness(90%); } /* WhatsApp */ .button.button-whatsapp { color: #ffffff; background-color: #455a64; } .button.button-whatsapp:hover, .button.button-whatsapp:focus { filter: brightness(90%); } /* Wordpress */ .button.button-wordpress { color: #ffffff; background-color: #21759b; } .button.button-wordpress:hover, .button.button-wordpress:focus { filter: brightness(90%); } /* X */ .button.button-x { color: #FFFFFF; background-color: #000000; border: 1px solid #FFFFFF; } .button.button-x:hover, .button.button-x:focus { filter: brightness(90%); } /* Xing */ .button.button-xing { color: #ffffff; background-color: #026466; } .button.button-xing:hover, .button.button-xing:focus { filter: brightness(90%); } /* YouTube */ .button.button-yt { color: #ffffff; background-color: #000000; border: 1px solid #FFFFFF; } .button.button-yt:hover, .button.button-yt:focus { filter: brightness(90%); } /* Zoom */ .button.button-zoom { color: #ffffff; background-color: #0B5CFF; } .button.button-zoom:hover, .button.button-zoom:focus { filter: brightness(90%); }