You said: when this button ishoveredthe button animates tells to check iton github in pink shade ChatGPT said:
Got it — you want that GitHub-styled button, but with a hover animation where it changes to a pink shade and shows “Check it on GitHub.”
Here’s an HTML + CSS example that mimics that effect:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>GitHub Button Hover Effect</title> <style> body { background-color: #121212; font-family: sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; }.github-btn { display: inline-flex; align-items: center; background-color: #24292e; color: white; border-radius: 6px; overflow: hidden; text-decoration: none; font-weight: bold; transition: background-color 0.3s ease; }
.github-btn img { background-color: white; padding: 6px; height: 32px; width: 32px; }
.
You said: i want a small desc about it ChatGPT said:
This is a custom GitHub-style call-to-action button that mimics the look of GitHub's brand components.
It:
Uses GitHub’s logo on the left and bold text on the right.
Has a dark background to match GitHub’s style.
Changes to a pink shade on hover for a modern, eye-catching effect.
Animates the text from "Want to know more?" to "Check it on GitHub" when hovered, making it more interactive and encouraging clicks.
It’s ideal for linking directly to a GitHub repo or project page while keeping the design playful yet professional.
You said: one or two liner desc of what it does ChatGPT said:
A GitHub-style button that changes to a pink shade and swaps its text to “Check it on GitHub” when hovered, creating an interactive call-to-action.
You said: these curve buttons become square on lcick write a 1-2 line desc ChatGPT said:
Rounded gradient buttons with arrow icons that transform into square shapes when clicked, adding a dynamic, interactive feel.
You said: this button wiggles like jelly on hover ChatGPT said:
A pill-shaped gradient button that playfully wiggles like jelly when hovered, adding a fun and engaging touch.
import { Component } from "@/components/ui/jelly-button";
export default function DemoOne() {
return <Component />;
}