You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

86 lines
2.4 KiB

  1. <div class="button demo">
  2. <div class="ui button">
  3. View
  4. </div>
  5. <div class="ui primary button">
  6. <i class="shop icon"></i> Add to Cart
  7. </div>
  8. <div class="ui secondary button">
  9. <i class="save icon"></i> Save for Later
  10. </div>
  11. <div class="ui labeled icon button">
  12. <i class="star icon"></i>
  13. Rate
  14. </div>
  15. <div class="ui basic button">Basic</div>
  16. <div class="ui fitted hidden divider"></div>
  17. <div class="ui animated button">
  18. <div class="visible content">Horizontal</div>
  19. <div class="hidden content">
  20. Hidden
  21. </div>
  22. </div>
  23. <div class="ui vertical animated button">
  24. <div class="visible content">Vertical</div>
  25. <div class="hidden content">
  26. Hidden
  27. </div>
  28. </div>
  29. <div class="ui animated fade button">
  30. <div class="visible content">Fade In</div>
  31. <div class="hidden content">
  32. Hidden
  33. </div>
  34. </div>
  35. <div class="ui fitted hidden divider"></div>
  36. <div class="ui buttons">
  37. <div class="ui button">1</div>
  38. <div class="ui button">2</div>
  39. <div class="ui button">3</div>
  40. </div>
  41. <div class="ui buttons">
  42. <div class="ui button">Cancel</div>
  43. <div class="or"></div>
  44. <div class="ui positive button">Save</div>
  45. </div>
  46. <div class="ui icon buttons">
  47. <div class="ui button"><i class="align left icon"></i></div>
  48. <div class="ui button"><i class="align center icon"></i></div>
  49. <div class="ui button"><i class="align right icon"></i></div>
  50. <div class="ui button"><i class="align justify icon"></i></div>
  51. </div>
  52. <div class="ui fitted hidden divider"></div>
  53. <div class="ui blue button">Blue</div>
  54. <div class="ui red button">Red</div>
  55. <div class="ui teal button">Teal</div>
  56. <div class="ui fitted hidden divider"></div>
  57. <div class="ui blue basic button">Blue</div>
  58. <div class="ui red basic button">Red</div>
  59. <div class="ui teal basic button">Teal</div>
  60. <div class="ui inverted segment">
  61. <div class="ui inverted button">Inverted</div>
  62. <div class="ui inverted blue button">Blue</div>
  63. <div class="ui inverted red button">Red</div>
  64. <div class="ui fitted hidden divider"></div>
  65. <div class="ui inverted basic button">Basic</div>
  66. <div class="ui inverted blue basic button">Blue</div>
  67. <div class="ui inverted red basic button">Red</div>
  68. </div>
  69. </div>
  70. <script type="text/javascript">
  71. $('.button.demo .follow')
  72. .state({
  73. text: {
  74. inactive : 'Follow',
  75. active : 'Following'
  76. }
  77. })
  78. ;
  79. </script>