Profile
Info
For this, the classes with -danger will be used because on most themes (on Pink it displays brown) it displays red/pink. Using filter:hue-rotate(); instead of outright changing the color will keep the effects upon hover/click. The colors will vary depending on what theme is being used, you can see how they vary by opening a new tab of your Display Settings and cycle through the themes & refreshing this page each time.
- Free to use
- OK to edit, modify, or frankenstein
- Mobile-Friendly
- Credit is not required, but if asked please do link back here
Default links/buttons using -danger classes:
Link
Link
Link
Link
Using filter:hue-rotate();
Code
Replace ## with your desired number, LinkHere with your desired link, and Text with your desired text.
Link:
<a class="text-danger" style="filter:hue-rotate(##deg);" href="Linkhere">Text</a>
Button:
<a class="btn-danger btn btn-sm" style="filter:hue-rotate(##deg);" href="LinkHere">Text</a>
Outlined Button:
<a class="btn-outline-danger btn btn-sm" style="filter:hue-rotate(##deg);" href="LinkHere">Text</a>
Badge-Pill:
<a class="badge-danger badge badge-pill" style="filter:hue-rotate(##deg);" href="LinkHere">Text</a>
Adding saturate();
Example is the default, filter:hue-rotate(0deg);, but it will work on all relative to the hue.
Code
Replace each ## with your desired numbers, LinkHere with your desired link, and Text with your desired text.
Link:
<a class="text-danger" style="filter:hue-rotate(##deg) saturate(##%);" href="Linkhere">Text</a>
Button:
<a class="btn-danger btn btn-sm" style="filter:hue-rotate(##deg) saturate(##%);" href="LinkHere">Text</a>
Outlined Button:
<a class="btn-outline-danger btn btn-sm" style="filter:hue-rotate(##deg) saturate(##%);" href="LinkHere">Text</a>
Badge-Pill:
<a class="badge-danger badge badge-pill" style="filter:hue-rotate(##deg) saturate(##%);" href="LinkHere">Text</a>
Recent Images
No images.