Updated Adding custom buttons to your own fork (markdown)

Adding-custom-buttons-to-your-own-fork.md

@@ -11,8 +11,9 @@ This is where you can add new CSS styling for a button you wish to add. We've ma
 ```
 /* BRAND NAME */
 .button.button-brandname {
-  color: #ffffff;
+  color: #HEX;
-  background-color: #0085ff;
+  background-color: #HEX;
+  border: 1px solid #HEX;
 }
 .button.button-brandname:hover,
 .button.button-brandname:focus {
@@ -46,6 +47,12 @@ This is the text color that will appear on your button. You'll typically find th
 
 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.
 
+### The Button Stroke and Stroke Color:
+
+`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;`.
+
 ### The Last Little CSS Bit:
 
 }
@@ -60,13 +67,14 @@ OKAY, that's it! You added the CSS, you did the thing! What's next?
 
 ## Add an Icon
 
-In `littlelink/images/icons/` you'll want to add a 24x24px SVG of the icon/brand. You can use a JPG or PNG, but it may suffer from poor resolution depending on the user device. SVGs are scalable and work pretty much everywhere. You'll want to manipulate the color of the icon to be accessible on top of your button background color. If you're using a brand color as your button background color, you may want your icon to be white (`#FFFFFF`) or black (`#000000`). If you used a neutral color, you may want your icon to be representative of your actual logo/icon colors.
+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.
 
 ## Add your button to index.html
 
 ```
-<a class="button button-brandname" href="#" target="_blank" rel="noopener">
+<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>
-   <img class="icon" 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.
@@ -77,7 +85,6 @@ Okay, this is pretty straightforward forward too. We'll break it down section by
 
 Change `brandname` with the same brand name you introduced in the `.button.button-brandname {` section above.
 
-
 ### Add Your Link
 
 Ready to make your button link somewhere? Just change the `#` in `href="#"` with your link, i.e. `href="https://littlelink.io"`.
@@ -88,10 +95,14 @@ Ready to make your button link somewhere? Just change the `#` in `href="#"` with
 
 `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.
+
 ### Breaking down the IMG attributes
 
 `class="icon"` | This class is telling the <img> 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.