WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
HTML
CSS
JS
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>HTML</title> <style> button { color: black; font: bold 18px sans-serif; background: cyan; } button:hover { background: blue; -webkit-transition: background 3s; transition: background 3s; } </style> </head> <body> <h2> Change color on hover </h2> <button> Click here </button> </body> </html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>HTML</title> <style> a { text-decoration: none; padding: 10px 15px; background: cyan; color: black; } a:hover { background: blue; -webkit-transition: background 2s; transition: background 2s; } </style> </head> <body> <h2> Change color on hover </h2> <a href="#"> Click here </a> </body> </html>
<!-- Replace with your HTML Code (Leave empty if not needed) -->
/* Replace with your JS Code (Leave empty if not needed) */
Preview
Open Advanced Editor
HTML
CSS
JS
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>HTML</title> <style> button { color: black; font: bold 18px sans-serif; background: cyan; } button:hover { background: blue; -webkit-transition: background 3s; transition: background 3s; } </style> </head> <body> <h2> Change color on hover </h2> <button> Click here </button> </body> </html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>HTML</title> <style> a { text-decoration: none; padding: 10px 15px; background: cyan; color: black; } a:hover { background: blue; -webkit-transition: background 2s; transition: background 2s; } </style> </head> <body> <h2> Change color on hover </h2> <a href="#"> Click here </a> </body> </html>
<!-- Replace with your HTML Code (Leave empty if not needed) -->
/* Replace with your JS Code (Leave empty if not needed) */
Preview
Validating your code, please wait...