Back
Syntax
Study
Editor
Mode:
HTML
CSS
JavaScript
PHP
Reset
Run »
HTML / CSS / JS
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Link Colors</title> <style> /* LoVe HAte order */ a:link { color: #0066cc; text-decoration: none; } a:visited { color: #551a8b; } a:hover { color: #ff4400; text-decoration: underline; } a:active { color: #ff0000; } /* Custom button-style link */ .btn { display: inline-block; padding: 8px 16px; background: #0066cc; color: white; border-radius: 4px; } .btn:hover { background: #004499; color: white; } </style> </head> <body> <p><a href="#">Normal link</a></p> <p><a href="#" class="btn">Button Link</a></p> </body> </html>
Result
Open