fragrant-button

Screenshot

About fragrant-button

fragrant-button is a set of CSS3 buttons, they're flat designed but we offer three D buttons and gradient buttons, so they're fragrant, tasty huh! We hope to provide a high flexibility, high configure buttons and button components.

Try

Taste the default button:

<button class="btn">
  BUTTON
</button>

Plain huh, just add some color, we offer green, blue, orange and silver(default):

  <button class="btn green">
    GREEN
  </button>

generates green button.

<button class="btn orange">
  ORANGE
</button>

generates orange button. The default is flat, make it 3D:

<button class="btn blue threed">
  3D BLUE
</button>

generates a 3D button. Flat is nonsense, make it gradient and more real:

<button class="btn green gradient">
  GRANDIENT GREEN
</button>

generates a gradient green button. Different kinds of basic buttons, primary, warning and disable, and pill shaped, there may be more in the future.

Generate button group is easy:

<div class="btn-group">
  <button class="btn green threed">
    BUTTON
  </button>
  <button class="btn blue threed">
    BUTTON
  </button>
  <button class="btn silver threed">
    BUTTON
  </button>
</div>

TODO

• enhance button group
• integrate to certain frontend framework
• other interesting elements
• rewrite using SCSS

License

MIT

Future

Any color schemes are my personal idea, feel free to modify them with your brilliant artistic skills.