CSS Button Generator With Icon
Customize your button's appearance with a wide range of options: choose from dozens of Font Awesome icons, set custom colors, adjust padding and border radius, add text shadows or box shadows, and apply various hover effects. All changes are shown in real time. Use the example presets below to get started quickly, or create your own unique style from scratch.
Button Customizer : Example Presets
Button Generator
Text
16px
Box
10px
5px
0px
(disabled when border size is 0)
Live Preview
Your button will look like this. Hover over it to see the effect. Text alignment is clearly visible.
Generated CSS Code
.my-button { }
How to Use
- Select a preset – Click any example button above to load its styles, or start from scratch.
- Customize properties – Use the accordion panels to adjust text, colors, borders, shadows, and hover effects.
- Add an icon – Choose from hundreds of Font Awesome icons in the dropdown.
- Preview live – See your changes instantly in the preview panel.
- Copy the CSS – Click the "Copy CSS" button to use the code in your project.
You can also use the Random Style button for inspiration or Reset to Defaults to start over.