Morphing Button
Preview
Edit
Download
Run
Download Options
HTML File
Download as .html file
CSS File
Download as .css file
JavaScript File
Download as .js file
Combined HTML
All code in one HTML file
Project ZIP
All files in a ZIP archive
Cancel
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title> Buttons</title> </head> <body> <button class="morph">Morphing</button> </body> </html>
CSS
body { font-family: Arial, sans-serif; background: #0f172a; color: #fff; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 20px; padding: 40px; } button { padding: 15px 30px; border: none; cursor: pointer; font-size: 16px; font-weight: bold; border-radius: 8px; transition: all 0.3s ease; } /* 2. Morphing Button */ .morph:hover { border-radius: 50px; background: #2563eb; color: #fff; }
JavaScript
Output Preview
Desktop
Mobile
Fullscreen
