A lightweight DIY alternative to services like Linktree and many.link.
Stack Overflow + Tweaks
Added Stack Overflow, renamed Steam Dark to Steam Alt to match the defined pattern we're already using for alternate buttons. Added stroke for accessibility.
+34
-8
+18
-6
css/brands.css
+18
-6
css/brands.css
···
884
884
filter: brightness(90%);
885
885
}
886
886
887
-
/* Steam Dark */
888
-
.button.button-steam-dark {
889
-
color: #ffffff;
890
-
background-image: linear-gradient(90deg, #09172a, #072a57, #0c5085);
887
+
/* Stack Overflow */
888
+
.button.button-stack-overflow {
889
+
color: #000000;
890
+
background-color: #FFFFFF;
891
+
border: 1px solid #000000;
891
892
}
892
-
.button.button-steam-dark:hover,
893
-
.button.button-steam-dark:focus {
893
+
.button.button-stack-overflow:hover,
894
+
.button.button-stack-overflow:focus {
894
895
filter: brightness(90%);
895
896
}
896
897
···
901
902
}
902
903
.button.button-steam:hover,
903
904
.button.button-steam:focus {
905
+
filter: brightness(90%);
906
+
}
907
+
908
+
/* Steam Alt */
909
+
.button.button-steam-alt {
910
+
color: #ffffff;
911
+
background-image: linear-gradient(90deg, #09172a, #072a57, #0c5085);
912
+
border: 1px solid #FFFFFF;
913
+
}
914
+
.button.button-steam-alt:hover,
915
+
.button.button-steam-alt:focus {
904
916
filter: brightness(90%);
905
917
}
906
918
+11
images/icons/stack-overflow.svg
+11
images/icons/stack-overflow.svg
···
1
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+
<g clip-path="url(#clip0_4003_8711)">
3
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.9487 15.4707H21.081V24H1.89001V15.4707H4.02235V21.8677H18.9487V15.4707Z" fill="#BBBBBB"/>
4
+
<path d="M6.34616 14.8368L16.8188 17.0379L17.2591 14.9444L6.78639 12.7422L6.34616 14.8368ZM7.73199 9.82211L17.4333 14.3403L18.3371 12.4001L8.63552 7.88188L7.73199 9.82211ZM10.4164 5.06255L18.641 11.9114L20.0107 10.2666L11.7861 3.41794L10.4164 5.06255ZM15.7253 0L14.0078 1.27746L20.3948 9.86495L22.1123 8.58769L15.7253 0ZM6.15466 19.7353H16.8163V17.603H6.15466V19.7353Z" fill="#F58025"/>
5
+
</g>
6
+
<defs>
7
+
<clipPath id="clip0_4003_8711">
8
+
<rect width="24" height="24" fill="white"/>
9
+
</clipPath>
10
+
</defs>
11
+
</svg>
+5
-2
index.html
+5
-2
index.html
···
325
325
<!-- Square -->
326
326
<a class="button button-square" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/square.svg" alt="">Buy with Square</a><br>
327
327
328
-
<!-- Steam Dark -->
329
-
<a class="button button-steam-dark" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/steam.svg" alt="">Steam</a><br>
328
+
<!-- Stack Overflow -->
329
+
<a class="button button-stack-overflow" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/stack-overflow.svg" alt="">Stack Overflow</a><br>
330
330
331
331
<!-- Steam -->
332
332
<a class="button button-steam" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/steam.svg" alt="">Steam</a><br>
333
+
334
+
<!-- Steam Alt -->
335
+
<a class="button button-steam-alt" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/steam.svg" alt="">Steam</a><br>
333
336
334
337
<!-- Strava -->
335
338
<a class="button button-strava" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/strava.svg" alt="">Strava</a><br>