Toolipedia- Free
- No sign-up
- Works on any device
No tool matches your search.
- Free
- No sign-up
- Works on any device
Create a QR code for a link, Wi-Fi, WhatsApp, contact and more, or read one from a photo.
- Free
- No sign-up
- Works on any device
Fill in the details to see your QR code.
PNG for phones, chats and websites. SVG and PDF stay sharp at any size, which is best for printing. Tip: point your phone camera at the preview to test it.
3. Style (optional): colors, dots, logo
Choose a photo or screenshot or drag it here
Works with photos of printed codes, screenshots and image files.
Looking for QR codes…
CSS button generator
Design buttons with gradients, shadows and hover effects, and copy the CSS.
- Free
- No sign-up
- Works on any device
About CSS button generator
Design a button visually: pick gradient or flat colours, padding, border radius, shadow and hover behaviour, then copy the CSS. Make hover and focus states obvious, and keep text contrast high enough to read. A transition of 150 to 250 milliseconds makes state changes feel smooth.
How to use CSS button generator
- Choose colours or a gradient for the button background.
- Set the text, padding, border radius, shadow and hover effect.
- Copy the CSS and apply the class to your button.
Why use this tool?
- Private: everything happens in your browser. Nothing you enter is uploaded.
- Free, with no sign-up, no watermark and no limit on how often you use it.
- Works on phones, tablets and computers: Android, iPhone, Windows, Mac and Linux. Nothing to install.
- Free to embed on your own website, with a ready-made code to copy.
- Available in 10 languages.
Also known as
Frequently asked questions
How do I add a hover effect to a CSS button?
Write a second rule with the :hover selector that changes background, shadow or transform, and add a transition on the base button so the change animates.
How do I make the button accessible?
Keep text and background contrast high and make the click area large enough. Also keep a visible focus style for keyboard users.
Can I use the CSS for a link styled as a button?
Yes. Apply the same class to an anchor tag and add display inline-block and text-decoration none so it looks like the preview.
Is CSS button generator free?
Yes. CSS button generator on Toolipedia is free to use, with no sign-up and no watermark.
Is it safe to use?
Yes. Everything is worked out in your browser, and nothing you enter is sent to our server.
Does it work on my phone?
Yes. It works in any modern browser on Android and iPhone, as well as on tablets and computers. There's nothing to install.
Do I need an account?
No. Just open the page and use the tool. There's no sign-up and no email needed.
Can I put CSS button generator on my own website?
Yes. Use the Embed on your site button under the tool to copy a short piece of code and paste it into your page. It is free, needs no account, and the tool keeps working inside your page.