Adding custom buttons to your own fork
We try to keep our index.html and brands.css well documented, but we'll give you the lowdown right here too! I also have two semi-short tutorials on YouTube you can watch to get started with LittleLink. Part 1: Deploying LittleLink with Vercel and Part 2: Making LittleLink Yours.
Let's take a look at the following file: littlelink/css/brands.css
This is where you can add new CSS styling for a button you wish to add. We've made this super simple, to where you only have to touch a few things. Here's a look at one one of the brand CSS blocks looks like:
/* BRAND NAME */
.button.button-brandname {
color: #HEX;
background-color: #HEX;
border: 1px solid #HEX;
}
.button.button-brandname:hover,
.button.button-brandname:focus {
filter: brightness(90%);
}
When editing this CSS, here's what you'll need to tweak.
/* BRAND NAME */
This is a comment line, you can add the brand name to help keep your file organized.
.button.button-brandname {
Swap brandname with the name of the brand, i.e. littlelink. This is what you'll declare in your button class in index.html later.
color: #ffffff;
This is the text color that will appear on your button. You'll typically find these being white (#FFFFFF) or black (#000000), but sometimes they'll be the brand color depending on what you make the background color in the next step.
background-color: #0085ff;
This will change the background color of your button. You'll typically find these being the core brand color or a neutral color. Make sure your button background color and button text color have a passing contrast ratio to meet accessibility standards.
border: 1px solid #FFFFFF;
This is not required for every button, it should only be added to buttons where the background color does not have appropriate contrast against the default dark and light theme for LittleLink. If the background does not provide enough contrast while using the light theme, try using border: 1px solid #000000;. If it does not provide enough contrast while using the dark theme, try using border: 1px solid #FFFFFF;.
} .button.button-brandname:hover, .button.button-brandname:focus { filter: brightness(90%); }
Just swap the brandname with the same value you added in the .button.button-brandname { section above.
OKAY, that's it! You added the CSS, you did the thing! What's next?
In the littlelink/images/icons/ directory, it's essential to include a 24x24px icon of the brand in SVG format. While JPG or PNG formats can be used, SVG is recommended due to its scalability and superior resolution across various devices. For optimal visibility against your button's background color, adjust the icon's color accordingly. If the button utilizes the brand's color scheme, consider setting the icon color to either white (#FFFFFF) or black (#000000) for contrast. Conversely, if a neutral background color is chosen, aim to use the brand's actual logo colors for the icon.
When incorporating the brand's official logo, ensure it remains legible and distinct when resized to 24x24px. If the primary logo does not adapt well to this smaller size, explore the brand's social media avatars or website favicon for inspiration, potentially modifying the logo to suit the required format. Any modifications should closely honor the brand's visual identity, maintaining the original logo's essence. Always provide the logo in .svg format to ensure it remains crisp and clear on any device.
<a class="button button-brandname" href="#" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons/brandname.svg" alt="Brand Name Logo">Button Text</a>
<br>
Okay, this is pretty straightforward forward too. We'll break it down section by section.
class="button button-brandname"
Change brandname with the same brand name you introduced in the .button.button-brandname { section above.
Ready to make your button link somewhere? Just change the # in href="#" with your link, i.e. href="https://littlelink.io".
target="_blank" | This attribute opens links in a new tab. Remove this attribute to prevent links from opening in a new tab.
rel="noopener" | This attribute instructs the browser to navigate to the target resource without granting the new browsing context access to the document that opened it. This is especially useful when opening untrusted links. https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/noopener
role="button" | This attribute tells assistive technology that the element behaves as a button.
class="icon" | This class is telling the tag that it should use the styling for icons found in
css/brands.css.
aria-hidden="true" | This removes the IMG element from the accessibility tree, making our button more screen reader friendly.
src="icons/[icon_name].svg" | This defines the icon you would like to display from the icons/ folder. For example, you can change this to src="icons/discord.svg" to use the Discord icon. Add your own 24x24 icons to the icons folder to reference them. We recommend providing a SVG.
alt="Example Logo" | This alt attribute helps provides alternate text for an image, this can assist users who use screen readers.