littlelink/css/brands.css
2024-11-13 11:51:51 -05:00

593 lines
11 KiB
CSS
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

/*
* LittleLink Button Styles
* https://littlelink.io
* Free to use under the MIT license
* http://www.opensource.org/licenses/mit-license.php
*/
/* Brand Button Base Styles
*/
/* Only include brand-specific button styling here */
.button,button {
color:var(--button-text,#000000);
background-color:var(--button-background,transparent);
border:var(--button-border,none);
transition:filter 0.2s ease,transform 0.2s ease;
}
/* Global Button Hover Effect
*/
.button:hover,button:hover {
filter:brightness(90%);
transform:translateY(-1px);
}
/* Button Icons
*/
.icon {
filter:var(--icon-filter,none);
}
/* Brand-Specific Styles
*/
/* Default */
.button.button-default {
--button-text:#ffffff;
--button-background:#2457F5;
--button-border:1px solid #ffffff;
}
/* Amazon */
.button-amazon {
--button-text:#000000;
--button-background:#FFFFFF;
--button-border:1px solid #212121;
}
/* Amazon Music */
.button-amazon-music {
--button-text:#000000;
--button-background:#25D1DA;
}
/* Apple App Store */
.button-appstore {
--button-text:#FFFFFF;
--button-background:#000000;
--button-border:1px solid #FFFFFF;
}
/* Apple Music */
.button-apple-music {
--button-text:#ffffff;
--button-background:#000000;
--button-border:1px solid #FFFFFF;
}
/* Apple Music Alt */
.button-apple-music-alt {
--button-text:#ffffff;
background-image:linear-gradient(to bottom,#FB5C74,#FA233B);
}
/* Apple Podcasts */
.button-apple-podcasts {
--button-text:#ffffff;
--button-background:#000000;
--button-border:1px solid #FFFFFF;
}
/* Apple Podcasts Alt */
.button-apple-podcasts-alt {
--button-text:#ffffff;
background-image:linear-gradient(to bottom,#F452FF,#832BC1);
}
/* Bandcamp */
.button-bandcamp {
--button-text:#ffffff;
--button-background:#1d9fc3;
}
/* Behance */
.button-behance {
--button-text:#ffffff;
--button-background:#0057FF;
--button-border:1px solid #FFFFFF;
}
/* Bluesky */
.button-bluesky {
--button-text:#FFFFFF;
--button-background:#1185FE;
}
/* Bluesky Alt */
.button-bluesky-alt {
--button-text:#000000;
--button-background:#FFFFFF;
--button-border:1px solid #000000;
}
/* Buy Me a Coffee */
.button-coffee {
--button-text:#000000;
--button-background:#ffdd00;
}
/* Cal.com */
.button-cal {
--button-text:#FFFFFF;
--button-background:#292929;
--button-border:1px solid #FFFFFF;
}
/* Calendly */
.button-calendly {
--button-text:#FFFFFF;
--button-background:#006BFF;
}
/* Cash App */
.button-cash-app {
--button-text:#ffffff;
background-image:linear-gradient(to bottom,#00d64b,#00c244);
}
/* dev.to */
.button-dev-to {
--button-text:#000000;
--button-background:#f5f5f5;
--button-border:1px solid #212121;
}
/* Discogs */
.button-discogs {
--button-text:#000000;
--button-background:#FFFFFF;
--button-border:1px solid #000000;
}
/* Discogs Alt */
.button-discogs-alt {
--button-text:#FFFFFF;
--button-background:#000000;
--button-border:1px solid #FFFFFF;
}
/* Discord */
.button-discord {
--button-text:#ffffff;
--button-background:#5865F2;
}
/* Dribbble */
.button-dribbble {
--button-text:#000000;
--button-background:#FFFFFF;
--button-border:1px solid #212121;
}
/* Etsy */
.button-etsy {
--button-text:#ffffff;
--button-background:#F45800;
}
/* Facebook */
.button-faceb {
--button-text:#ffffff;
--button-background:#1877f2;
}
/* Facebook Messenger */
.button-messenger {
--button-text:#ffffff;
background-image:linear-gradient(25deg,#0099ff,#5f5dff,#a033ff,#c740cc,#ff5280,#ff7061);
}
/* Figma */
.button-figma {
--button-text:#ffffff;
--button-background:#000000;
--button-border:1px solid #FFFFFF;
}
/* Fiverr */
.button-fiverr {
--button-text:#ffffff;
--button-background:#1DBF73;
}
/* Flickr */
.button-flickr {
--button-text:#ffffff;
--button-background:#000000;
--button-border:1px solid #FFFFFF;
}
/* GitHub */
.button-github {
--button-text:#ffffff;
--button-background:#000000;
--button-border:1px solid #FFFFFF;
}
/* GitLab */
.button-gitlab {
--button-text:#ffffff;
--button-background:#6151b2;
}
/* GoFundMe */
.button-gofundme {
--button-text:#ffffff;
--button-background:#02A95C;
}
/* Goodreads */
.button-goodreads {
--button-text:#333333;
--button-background:#f3f1e6;
--button-border:1px solid #212121;
}
/* Google Black */
.button-google-black {
--button-text:#FFFFFF;
--button-background:#000000;
--button-border:1px solid #FFFFFF;
}
/* Google Play Store */
.button-playstore {
--button-text:#FFFFFF;
--button-background:#000000;
--button-border:1px solid #FFFFFF;
}
/* Google Scholar */
.button-google-scholar {
--button-text:#000000;
--button-background:#FFFFFF;
--button-border:1px solid #212121;
}
/* Hashnode */
.button-hashnode {
--button-text:#000000;
--button-background:#ffffff;
--button-border:1px solid #212121;
}
/* Instagram */
.button-instagram {
--button-text:#ffffff;
background-image:linear-gradient(-135deg,#1400c8,#b900b4,#f50000);
}
/* Kick */
.button-kick {
--button-text:#ffffff;
--button-background:#000000;
--button-border:1px solid #ffffff;
}
/* Kick Alt */
.button-kick-alt {
--button-text:#000000;
--button-background:#01e701;
}
/* Kickstarter */
.button-kickstarter {
--button-text:#ffffff;
--button-background:#05ce78;
}
/* Kit */
.button-kit {
--button-text:#ffffff;
--button-background:#000000;
--button-border:1px solid #FFFFFF;
}
/* Ko-fi */
.button-ko-fi {
--button-text:#ffffff;
--button-background:#000000;
--button-border:1px solid #FFFFFF;
}
/* Last.fm */
.button-last-fm {
--button-text:#ffffff;
--button-background:#D51007;
}
/* Letterboxd */
.button-letterboxd {
--button-text:#ffffff;
--button-background:#2c3440;
--button-border:1px solid #FFFFFF;
}
/* Line */
.button-line {
--button-text:#FFFFFF;
--button-background:#06C755;
}
/* LinkedIn */
.button-linked {
--button-text:#ffffff;
--button-background:#2867b2;
}
/* Mailchimp */
.button-mailchimp {
--button-text:#000000;
--button-background:#FFE01B;
}
/* Mastodon */
.button-mastodon {
--button-text:#ffffff;
--button-background:#17063B;
--button-border:1px solid #FFFFFF;
}
/* Medium */
.button-medium {
--button-text:#ffffff;
--button-background:#000000;
--button-border:1px solid #FFFFFF;
}
/* Microsoft */
.button-microsoft {
--button-text:#ffffff;
--button-background:#000000;
--button-border:1px solid #FFFFFF;
}
/* Notion */
.button-notion {
--button-text:#000000;
--button-background:#ffffff;
--button-border:1px solid #212121;
}
/* OnlyFans */
.button-onlyfans {
--button-text:#ffffff;
--button-background:#00AEEF;
}
/* Patreon */
.button-patreon {
--button-text:#ffffff;
--button-background:#000000;
--button-border:1px solid #FFFFFF;
}
/* PayPal */
.button-paypal {
--button-text:#ffffff;
--button-background:#002991;
--button-border:1px solid #FFFFFF;
}
/* Pinterest */
.button-pinterest {
--button-text:#000000;
--button-background:#ffffff;
--button-border:1px solid #212121;
}
/* Product Hunt */
.button-product-hunt {
--button-text:#000000;
--button-background:#ffffff;
--button-border:1px solid #212121;
}
/* Read.cv */
.button-read-cv {
--button-text:#FFFFFF;
--button-background:#000000;
--button-border:1px solid #FFFFFF;
}
/* Reddit */
.button-reddit {
--button-text:#FFFFFF;
--button-background:#FF4500;
}
/* Shop */
.button-shop {
--button-text:#ffffff;
--button-background:#5A31F4;
}
/* Signal */
.button-signal {
--button-text:#ffffff;
--button-background:#3a76f0;
}
/* Slack */
.button-slack {
--button-text:#000000;
--button-background:#FFFFFF;
--button-border:1px solid #212121;
}
/* Snapchat */
.button-snapchat {
--button-text:#000000;
--button-background:#fffc00;
}
/* SoundCloud */
.button-soundcloud {
--button-text:#ffffff;
--button-background:#ff5500;
}
/* Spotify */
.button-spotify {
--button-text:#191414;
--button-background:#1db954;
}
/* Spotify Alt */
.button-spotify-alt {
--button-text:#FFFFFF;
--button-background:#191414;
--button-border:1px solid #FFFFFF;
}
/* Square */
.button-square {
--button-text:#FFFFFF;
--button-background:#006AFF;
}
/* Stack Overflow */
.button-stack-overflow {
--button-text:#000000;
--button-background:#FFFFFF;
--button-border:1px solid #000000;
}
/* Steam */
.button-steam {
--button-text:#ffffff;
background-image:linear-gradient(90deg,#08BBFF,#2B75FF);
}
/* Steam Alt */
.button-steam-alt {
--button-text:#ffffff;
background-image:linear-gradient(90deg,#09172a,#072a57,#0c5085);
--button-border:1px solid #FFFFFF;
}
/* Strava */
.button-strava {
--button-text:#ffffff;
--button-background:#fc5200;
}
/* Substack */
.button-substack {
--button-text:#ffffff;
--button-background:#FF6719;
}
/* Telegram */
.button-telegram {
--button-text:#ffffff;
--button-background:#3faee8;
}
/* Threads */
.button-threads {
--button-text:#FFFFFF;
--button-background:#000000;
--button-border:1px solid #FFFFFF;
}
/* Threema */
.button-threema {
--button-text:#000000;
--button-background:#3fe669;
}
/* TikTok */
.button-tiktok {
--button-text:#ffffff;
--button-background:#000000;
--button-border:1px solid #FFFFFF;
}
/* Trello */
.button-trello {
--button-text:#ffffff;
--button-background:#0065ff;
}
/* Tumblr */
.button-tumb {
--button-text:#ffffff;
--button-background:#131313;
--button-border:1px solid #FFFFFF;
}
/* Twitch */
.button-twitch {
--button-text:#ffffff;
--button-background:#9146ff;
}
/* Unsplash */
.button-unsplash {
--button-text:#000000;
--button-background:#ffffff;
--button-border:1px solid #212121;
}
/* Venmo */
.button-venmo {
--button-text:#ffffff;
--button-background:#008CFF;
}
/* Vimeo */
.button-vimeo {
--button-text:#ffffff;
--button-background:#1ab7ea;
}
/* VSCO */
.button-vsco {
--button-text:#FFFFFF;
--button-background:#000000;
--button-border:1px solid #FFFFFF;
}
/* WhatsApp */
.button-whatsapp {
--button-text:#ffffff;
--button-background:#455a64;
}
/* WordPress */
.button-wordpress {
--button-text:#ffffff;
--button-background:#3858E9;
}
/* X */
.button-x {
--button-text:#FFFFFF;
--button-background:#000000;
--button-border:1px solid #FFFFFF;
}
/* YouTube */
.button-yt {
--button-text:#ffffff;
--button-background:#282828;
--button-border:1px solid #FFFFFF;
}
/* Zoom */
.button-zoom {
--button-text:#ffffff;
--button-background:#0B5CFF;
--button-border:1px solid #FFFFFF;
}