Simple Buttons
default primary accent whitish blackish greenish reddish yellowish bluishdefault primary accent whitish blackish greenish reddish yellowish bluish
default primary accent whitish blackish greenish reddish yellowish bluish
Utility Effects
default primary accent whitish blackish greenish reddish yellowish bluishdefault primary accent whitish blackish greenish reddish yellowish bluish
Padding xl Padding xs Padding sm Padding Padding lg
And even more!
There are a lot of Utility CSS classes that you can combine with your buttons to achieve unique and awesome styles to not only match them with your design but also make them work in any situation, no matter you're using them in your website or your web app project!Utility CSS classes such as Responsive Utilities to show and hide the block by device via media query, and faster mobile-friendly development. No worries, you'll learn everything about the Utility CSS classes in the documentation.
Icon & SVG
Info Help Appearance Users Comments Undo Redo SaveFramework Link Heart Brain Package Hourglass Calendar
Calendar with dynamic date
SVG Loader Buttons
Heads up! If you also use modernizr inside your pages, an Hourglass icon will be shown by default when you're using one of the loader SVG animation icons in browsers that do not support SVG animations.
Group Buttons
Variety of Modifiers
default primary accent whitish blackish greenish reddish yellowish bluishdefault primary accent whitish blackish greenish reddish yellowish bluish
default primary accent whitish blackish greenish reddish yellowish bluish
Rotator Effect
Fader Effect
Let's play with sizes
As you can see, you just simply combine the size CSS classes with any of the effect modifiers and you're good to go! Unlimited styles can be achieved. Cheers!Size xs Size sm Size Default Size lg
Active / Disable / Loading States
There are many times that you may need to activate, deactivate, or load something in your web apps! So you certainly need to modify your buttons states. And that's exactly what `f8-button` offers!Active State
Default Button Default Button - ActiveLight Button Light Button - Active
Outline Button Outline Button - Active
3D Button 3D Button - Active
Disable State
Default Button Default Button - DisableLight Button Light Button - Disable
Outline Button Outline Button - Disable
3D Button 3D Button - Disable
Loading State
Loading state is useful for the times that you like to interact with server or submit AJAX forms. You simply add the Loading State CSS class by Javascript and remove it when you receive the results from server. And yep! How to use examples are all explained in the documentation!Heads up! The loading spinner of your buttons can be anything! Your own GIF image, SVG, Fontawesome spinner icons, or even our default SVG loader icons.
Call-to-action Buttons
Social Icons
... ... ... ... ... ...Form Buttons
You can use the button classes on an<a>, <button>, or <input> element.Link Link disabled
Even More
As you see there are different kinds of CSS classes (we call them modifiers) that you can use for your blocks and combine them together to achieve unlimited number of styles.- Color
- Size
- Visual
- Effect
- State
- Icon Block Modifiers
- Utilities Block Modifiers
- And of course your own CSS styles...
The combination of all of these modifiers together make variety of effects and styles to match your own designs. And of course, everything is explained in details, in the documenation.