//This code can be optimized with variables usages.
//This is jsut a demonstration here on how you can achieve easy styling without too much code.
//If you have any suggestion, feel free to post them in the comment!
//Source: https://ttiki.github.io
//Your maps of different colours. Just add a new entry to this map to automatically generate the code for your new colour!
$btn-link-colors: (--green: #008000,
--red:#c80000,
--purple:#9600ff,
--yellow: #ffff00,
--orange:#ffc800,
--white: white);
//The default style of your button (margin, corners, etc.)
.btn-link { margin: -10px 5px 5px 0; padding: 7px 16px; font-size: 14px; font-weight: 500; line-height: 20px; text-decoration: none; cursor: pointer; border-radius: 7px; border: 1px solid;	//Hovering transition effect	transition: .2s;	//Create your list of coloured buttons @each $key, $val in $btn-link-colors { &.#{$key} { background-color: #{$val}; border-color: darken($val, 7%); //Dynamically change the color text for better readability	//You can change the value below (50) to dial up or down the sensibility @if (lightness($val) > 45) { color: black !important; } @else { color: white !important; }	//This hover action darken the color	&:hover{	background-color: darken($val, 7%);	border-color: darken($val, 10%);	} }	//This hover action is called if no colour is selected for your button.	&:hover{	background-color: darken(white, 20%);	} }
}