Colored link button style

//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%);
			}
    }
}

Source: codepen.io

Similar codes

0 vote137 views1 answer
Css ie11 only
CSS
43 votes145 views4 answers
What is a max and min width media query
CSS
0 vote143 views1 answer
Account system php html
CSS
3 votes152 views3 answers
Warning: Failed child context type: Invalid child context `virtualizedCell.cellKey` of type `number` supplied to `CellRenderer`, expected `string`.
CSS
0 vote179 views1 answer
Make previous commit master
CSS
24 votes148 views4 answers
How to remove link blue color from a tag using css
CSS
1 vote149 views1 answer
"League\Flysystem\AwsS3v3\AwsS3Adapter"
CSS
0 vote141 views1 answer
Change your cursor
CSS
1 vote140 views1 answer
303,592 HDK to pounds
CSS
43 votes136 views4 answers
Scale css
CSS