New Brand Options!

- Added TikTok
- Added generic email icon
- Added alternative email icon
- Added default button to brands.css for your own branding

css/brands.css

@@ -75,6 +75,14 @@ button:hover,
 /* Brand Styles
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
 
+/* Default (this is great for your own brand color!) */
+.button.button-default {
+  color: #FFFFFF;
+  background-color: #0085FF }
+.button.button-default:hover,
+.button.button-default:focus {
+  filter: brightness(90%) }
+
 /* Discord */
 .button.button-discord {
   color: #FFFFFF;
@@ -230,6 +238,14 @@ button:hover,
 .button.button-telegram:focus {
   filter: brightness(90%) }
 
+/* TikTok */
+.button.button-tiktok {
+  color: #FFFFFF;
+  background-color: #000000 }
+.button.button-tiktok:hover,
+.button.button-tiktok:focus {
+  filter: brightness(90%) }
+
 /* Tumblr */
 .button.button-tumblr {
   color: #FFFFFF;

icons/email.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21.6 2H2.4C1.08 2 0.012 3.08 0.012 4.4L0 18.8C0 20.12 1.08 21.2 2.4 21.2H21.6C22.92 21.2 24 20.12 24 18.8V4.4C24 3.08 22.92 2 21.6 2ZM21.6 6.8L12 12.8L2.4 6.8V4.4L12 10.4L21.6 4.4V6.8Z" fill="white"/>
+</svg>

icons/email_alt.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 0C5.376 0 0 5.376 0 12C0 18.624 5.376 24 12 24H18V21.6H12C6.792 21.6 2.4 17.208 2.4 12C2.4 6.792 6.792 2.4 12 2.4C17.208 2.4 21.6 6.792 21.6 12V13.716C21.6 14.664 20.748 15.6 19.8 15.6C18.852 15.6 18 14.664 18 13.716V12C18 8.688 15.312 6 12 6C8.688 6 6 8.688 6 12C6 15.312 8.688 18 12 18C13.656 18 15.168 17.328 16.248 16.236C17.028 17.304 18.372 18 19.8 18C22.164 18 24 16.08 24 13.716V12C24 5.376 18.624 0 12 0ZM12 15.6C10.008 15.6 8.4 13.992 8.4 12C8.4 10.008 10.008 8.4 12 8.4C13.992 8.4 15.6 10.008 15.6 12C15.6 13.992 13.992 15.6 12 15.6Z" fill="white"/>
+</svg>

icons/tiktok.svg

@@ -0,0 +1,12 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.1844 8.66371C18.7529 9.77082 20.6747 10.4223 22.75 10.4223V6.47879C22.3572 6.47894 21.9655 6.43846 21.5812 6.35801V9.46215C19.506 9.46215 17.5845 8.81068 16.0156 7.70357V15.751C16.0156 19.7768 12.7105 23.0401 8.63356 23.0401C7.11244 23.0401 5.69853 22.586 4.52397 21.8072C5.8645 23.1606 7.7339 24.0002 9.80209 24.0002C13.8793 24.0002 17.1845 20.7369 17.1845 16.711V8.66371H17.1844ZM18.6262 4.68523C17.8246 3.82052 17.2983 2.70293 17.1844 1.46739V0.960205H16.0768C16.3555 2.53047 17.3065 3.87206 18.6262 4.68523V4.68523ZM7.10255 18.7181C6.65472 18.1383 6.41264 17.4289 6.41372 16.6995C6.41372 14.8583 7.92553 13.3654 9.79063 13.3654C10.1382 13.3652 10.4837 13.4179 10.815 13.5216V9.49005C10.4279 9.43767 10.0372 9.41547 9.64658 9.42364V12.5616C9.31513 12.4579 8.96949 12.4052 8.6218 12.4054C6.7567 12.4054 5.24504 13.8983 5.24504 15.7397C5.24504 17.0416 6.00066 18.169 7.10255 18.7181V18.7181Z" fill="#EE1D52"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.014 7.70357C17.583 8.81068 19.5045 9.46215 21.5797 9.46215V6.35801C20.4213 6.11447 19.3958 5.51667 18.6247 4.68523C17.305 3.87206 16.354 2.53047 16.0752 0.960205H13.1659V16.7109C13.1593 18.547 11.65 20.0338 9.78896 20.0338C8.69223 20.0338 7.7179 19.5177 7.10088 18.7181C5.99899 18.169 5.24338 17.0416 5.24338 15.7397C5.24338 13.8983 6.75504 12.4054 8.62014 12.4054C8.97745 12.4054 9.32186 12.4604 9.64492 12.5616V9.42364C5.63968 9.50534 2.41843 12.7368 2.41843 16.711C2.41843 18.6949 3.22062 20.4934 4.52245 21.8074C5.69701 22.5861 7.11092 23.0402 8.63204 23.0402C12.7089 23.0402 16.014 19.7768 16.014 15.7511V7.70357Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M21.5799 6.35781V5.51844C20.5353 5.52 19.5113 5.23114 18.625 4.68489C19.4095 5.533 20.4426 6.11787 21.5799 6.35781V6.35781ZM16.0755 0.96C16.0489 0.809948 16.0284 0.658884 16.0143 0.507186V0H11.9972V15.7508C11.9907 17.5868 10.4816 19.0736 8.62039 19.0736C8.07389 19.0736 7.55806 18.9456 7.10114 18.7179C7.71816 19.5175 8.69249 20.0336 9.78922 20.0336C11.6502 20.0336 13.1595 18.5468 13.1661 16.7107V0.96H16.0755ZM9.64532 9.42343V8.52984C9.30964 8.4845 8.97123 8.46184 8.63243 8.46202C4.5551 8.46202 1.25 11.7255 1.25 15.7508C1.25 18.2745 2.54896 20.4987 4.52285 21.807C3.22102 20.493 2.41882 18.6945 2.41882 16.7107C2.41882 12.7366 5.63993 9.50513 9.64532 9.42343V9.42343Z" fill="#69C9D0"/>
+</g>
+<defs>
+<clipPath id="clip0">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>

index.html

@@ -107,6 +107,18 @@
         <a class="button button-pinterest" href="#"><img class="icon" src="icons/pinterest.svg">Follow on Pinterest</a>
           <br>
 
+        <!-- TikTok -->
+        <a class="button button-tiktok" href="#"><img class="icon" src="icons/tiktok.svg">TikTok</a>
+        <br>
+
+        <!-- Email -->
+        <a class="button button-default" href="#"><img class="icon" src="icons/email.svg">hello@littlelink.io</a>
+        <br>
+
+        <!-- Email Alternative -->
+        <a class="button button-default" href="#"><img class="icon" src="icons/email_alt.svg">hello@littlelink.io</a>
+        <br>
+
         <!-- SoundCloud -->
         <a class="button button-soundcloud" href="#"><img class="icon" src="icons/soundcloud.svg">SoundCloud</a>
           <br>