t24-button - Awesome Collection of CSS3 Buttons

t24-button - Awesome Collection of CSS3 Buttons

t24-button is a 24TEMPLATE Block

t24-button is an Awesome Collection

t24-button is compatible with all modern browsers, and frameworks

t24-button has all kinds of buttons

Rate Us!

Join the MyThemeIsReady Awesomeness!

All-in-One solution.

You need buttons everywhere! So how cool would it be to have an All-in-One solution which has all of the cool CSS styled buttons gathered in one single CSS with lots of effects and modifiers that you may need in every web page or web app.

Fits just right in.

Compatible with all modern browsers, frameworks, and web environments. Using Pure HTML5 or a front-end framework such as Bootstrap, MDL, Foundation, or anything else? It doesn’t make any difference! You’re in good company.

Full documentation.

Anything that you need to know about creating buttons is in the documentation that you download. Introduction on how to get started, Compatibility notes, Button block documentation, and etc…

Most important included files.

The included .js files are completely optional! You may use them only if you’re going to use the SVG Icon styles.

  • ES6 and .scss source files
  • Precompiled .js and .css files


  • Supported on <a>, <button>, and <input> tags
  • Light; it’s only 50KB
  • Easy to use; it’s designed based on BEM Methodology
  • Call-to-action button
  • Button with icon
  • Variety of colors
  • Variety of sizes
  • Block / Icon visual Modifiers
  • Variety of effects
  • Active / Disable / Loading states
  • Variety of predefined loaders (spinners)
  • Combination with other font icon libraries (such as font-awesome)
  • Combination with 24Template utility CSS classes

t24-button Changelog

2017.07.14 – version 1.4.0
  - Utils block: Added `.text-{left,right,center}` modifiers
2017.05.09 – version 1.3.0
  - Utils block: Added some more utility CSS classes
  - Changed 'dist' directory folder structure
2017.04.10 – version 1.2.0
  - Changed Utility `.js` and `.css` files name from '24TEMPLATE-utils' to '24component-all'
  - Icon block: Load IMG without getting cut-off when 'light' and 'outline' effects are also applied
2017.03.28 – version 1.1.0
  - Utils block: Added more opacity CSS classes
  - Icon block: Make it to also change the color of the circle SVG loader
2017.03.22 – version 1.0.0
  - First Release