Button generatorTailwind CSS

Note: If you need a more advanced solution check out Tailwind Buttons made with TW Elements - free and powerful UI Kit for Tailwind CSS.

    Note: This generator uses the Roboto font. If the text in your button is slightly crooked, it may mean that the font you use in your project has slightly different dimensions. In this case, you can either replace your font with Roboto (read this tutorial to learn how to add this) or adjust the paddings in the button so that the text is perfectly centered.

    Settings

    Tag

    Colors


    Text

    Note: To add the Ripple Effect (click on the button to see it) you need to install TW Elements - a free component library for Tailwind CSS.