SemanSemantic-UItic-UI/build/uncompressed/elements/button.css

/*
 * # Semantic Button - Flat
 * http://github.com/quirkyinc/semantic
 *
 *
 * Copyright 2013 Contributors
 * Released under the MIT license
 * http://opensource.org/licenses/MIT
 *
 * Released: April 17 2013
 */
/*******************************
            Button
*******************************/
/* Prototype */
.ui.button {
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
  min-height: 1em;
  background-color: #F0F0F0;
  padding: 0.8em 1.5em;
  font-size: 1rem;
  text-transform: uppercase;
  line-height: 1;
  font-weight: bold;
  font-style: normal;
  text-align: center;
  color: #7A7A7A;
  -webkit-border-radius: 0.3125em;
  -moz-border-radius: 0.3125em;
  border-radius: 0.3125em;
  -webkit-box-shadow: 0em -0.125em 0em rgba(0, 0, 0, 0.1) inset;
  -moz-box-shadow: 0em -0.125em 0em rgba(0, 0, 0, 0.1) inset;
  box-shadow: 0em -0.125em 0em rgba(0, 0, 0, 0.1) inset;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-transition: opacity 0.1s linear, background 0.1s linear, box-shadow 0.1s linear;
  -moz-transition: opacity 0.1s linear, background 0.1s linear, box-shadow 0.1s linear;
  -o-transition: opacity 0.1s linear, background 0.1s linear, box-shadow 0.1s linear;
  -ms-transition: opacity 0.1s linear, background 0.1s linear, box-shadow 0.1s linear;
  transition: opacity 0.1s linear, background 0.1s linear, box-shadow 0.1s linear;
}
/*******************************
             States
*******************************/
/*--------------
     Hover
---------------*/
.ui.button:hover,
.ui.button.hover {
  background-color: #E0E0E0;
}
/*--------------
  Down (:active)
---------------*/
/* Down */
.ui.button:active,
.ui.button.down {
  background-color: #DDDDDD;
  -webkit-box-shadow: 0.125em 0.125em 0.125em 0 rgba(0, 0, 0, 0.1) inset;
  -moz-box-shadow: 0.125em 0.125em 0.125em 0 rgba(0, 0, 0, 0.1) inset;
  box-shadow: 0.125em 0.125em 0.125em 0 rgba(0, 0, 0, 0.1) inset;
}
/*--------------
     Active
---------------*/
.ui.buttons .button.active,
.ui.button.active {
  background-color: #E6E6E6;
  -webkit-box-shadow: 0em 0.125em 0.125em 0em rgba(0, 0, 0, 0.15) inset;
  -moz-box-shadow: 0em 0.125em 0.125em 0em rgba(0, 0, 0, 0.15) inset;
  box-shadow: 0em 0.125em 0.125em 0em rgba(0, 0, 0, 0.15) inset;
}
.ui.buttons .button.active,
.ui.buttons .button.active a,
.ui.button.active,
.ui.button.active a {
  color: #7A7A7A;
}
.ui.buttons .button.active.hover,
.ui.button.active.hover {
  background: #E0E0E0;
  -webkit-box-shadow: 0px 0.0625 0.1875em 0em rgba(0, 0, 0, 0.2) inset;
  -moz-box-shadow: 0em 0.0625 0.1875em 0em rgba(0, 0, 0, 0.2) inset;
  box-shadow: 0em 0.0625 0.1875em 0em rgba(0, 0, 0, 0.2) inset;
}
.ui.buttons .button.active.hover,
.ui.buttons .button.active.hover a,
.ui.button.active.hover,
.ui.button.active.hover a {
  background: #DADADA;
  color: #555555;
}
/*--------------
    Loading
---------------*/
.ui.button.loading,
.ui.button.loading.hover {
  position: relative;
  cursor: default;
  opacity: 0.75;
  color: #888888 !important;
  background-image: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important;
  -webkit-transition: all 0s linear;
  -moz-transition: all 0s linear;
  -o-transition: all 0s linear;
  -ms-transition: all 0s linear;
  transition: all 0s linear;
}
.ui.button.loading:after {
  position: absolute;
  top: 0em;
  left: 0em;
  width: 100%;
  height: 100%;
  content: '';
  background: #eeeeee url(../images/throbber-tiny.gif) no-repeat 50% 50%;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  -moz-border-radius: 0.2em;
  -webkit-border-radius: 0.2em;
  border-radius: 0.2em;
}
/* Opposite color loader */
.ui.grey.button.loading,
.ui.button.active.loading {
  border-color: #bbbbbb;
}
.ui.grey.button.loading:after,
.ui.button.active.loading:after {
  background-color: #FAFAFA;
  background: url(../images/throbber-tiny.gif) no-repeat 50% 50%;
}
/* resizes */
/* blue */
.ui.huge.button.loading:after {
  background-image: url(../images/throbber-small.gif);
}
.ui.massive.buttons .button.loading:after,
.ui.gigantic.buttons .button.loading:after,
.ui.massive.button.loading:after,
.ui.gigantic.button.loading:after {
  background-image: url(../images/throbber-medium.gif);
}
/* grey */
.ui.huge.grey.button.loading:after,
.ui.huge.button.loading.active:after {
  background-image: url(../images/throbber-small.gif);
}
.ui.massive.grey.buttons .button.loading:after,
.ui.gigantic.grey.buttons .button.loading:after,
.ui.massive.grey.button.loading:after,
.ui.gigantic.grey.button.loading:after,
.ui.massive.grey.buttons .button.loading.active:after,
.ui.gigantic.grey.buttons .button.loading.active:after,
.ui.massive.button.loading.active:after,
.ui.gigantic.button.loading.active:after {
  background-image: url(../images/throbber-medium.gif);
}
/*--------------
      Error
---------------*/
.ui.buttons .button.error,
.ui.buttons .button.error.hover,
.ui.buttons .button.error.down,
.ui.button.error,
.ui.button.error.hover,
.ui.button.error.down {
  cursor: default;
  position: relative;
  background-color: #EE141D;
  color: #FFFFFF;
  text-shadow: none;
  -webkit-transition: all 0s linear;
  -moz-transition: all 0s linear;
  -o-transition: all 0s linear;
  -ms-transition: all 0s linear;
  transition: all 0s linear;
}
.ui.button.success,
.ui.button.success.hover,
.ui.button.success.down {
  background-color: #59B94B;
  color: #FFFFFF;
  border-color: #588D0F;
}
/*-------------------
      Disabled
--------------------*/
.ui.button.disabled,
.ui.button.disabled.hover,
.ui.button.disabled.down {
  cursor: default;
  color: #DDDDDD;
  background-color: rgba(50, 50, 50, 0.05) !important;
  background-image: none !important;
  text-shadow: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important;
}
/*******************************
           Variations
*******************************/
/*--- Black ---*/
.ui.buttons.black .button,
.ui.button.black {
  background-color: #5C6166;
  color: #FFFFFF;
}
.ui.buttons.black .button.hover,
.ui.buttons.black .button:hover,
.ui.button.black.hover,
.ui.button.black:hover {
  background-color: #888888;
  color: #FFFFFF;
}
.ui.buttons.black .button.down,
.ui.buttons.black .button:active,
.ui.button.black.down,
.ui.button.black:active {
  background-color: #888888;
  color: #FFFFFF;
}
/*--- Green ---*/
.ui.buttons.green .button,
.ui.button.green {
  background-color: #A1CF64;
  color: #FFFFFF;
}
.ui.buttons.green .button.hover,
.ui.buttons.green .button:hover,
.ui.button.green.hover,
.ui.button.green:hover {
  background-color: #89B84C;
  color: #FFFFFF;
}
.ui.buttons.green .button.down,
.ui.buttons.green .button:active,
.ui.button.green.down,
.ui.button.green:active {
  background-color: #89B84C;
  color: #FFFFFF;
}
/*--- Red ---*/
.ui.buttons.red .button,
.ui.button.red {
  background-color: #EF4D6D;
  color: #FFFFFF;
}
.ui.buttons.red .button.hover,
.ui.buttons.red .button:hover,
.ui.button.red.hover,
.ui.button.red:hover {
  background-color: #DE3859;
  color: #FFFFFF;
}
.ui.buttons.red .button.down,
.ui.buttons.red .button:active,
.ui.button.red.down,
.ui.button.red:active {
  background-color: #DE3859;
  color: #FFFFFF;
}
/*--- Blue ---*/
.ui.buttons.blue .button,
.ui.button.blue {
  background-color: #6ECFF5;
  color: #FFFFFF;
}
.ui.buttons.blue .button.hover,
.ui.buttons.blue .button:hover,
.ui.button.blue.hover,
.ui.button.blue:hover {
  background-color: #1AB8F3;
  color: #FFFFFF;
}
.ui.buttons.blue .button.down,
.ui.buttons.blue .button:active,
.ui.button.blue.down,
.ui.button.blue:active {
  background-color: #1AB8F3;
  color: #FFFFFF;
}
/*--- Purple ---*/
.ui.buttons.purple .button,
.ui.button.purple {
  background-color: #564F8A;
  color: #FFFFFF;
}
.ui.buttons.purple .button.hover,
.ui.buttons.purple .button:hover,
.ui.button.purple.hover,
.ui.button.purple:hover {
  background-color: #3E3773;
  color: #FFFFFF;
}
.ui.buttons.purple .button.down,
.ui.buttons.purple .button:active,
.ui.button.purple.down,
.ui.button.purple:active {
  background-color: #3E3773;
  color: #FFFFFF;
}
/*--- Teal ---*/
.ui.buttons.teal .button,
.ui.button.teal {
  background-color: #00B5AD;
  color: #FFFFFF;
}
.ui.buttons.teal .button.hover,
.ui.buttons.teal .button:hover,
.ui.button.teal.hover,
.ui.button.teal:hover {
  background-color: #009A93;
  color: #FFFFFF;
}
.ui.buttons.teal .button.down,
.ui.buttons.teal .button:active,
.ui.button.teal.down,
.ui.button.teal:active {
  background-color: #009A93;
  color: #FFFFFF;
}
/*---------------
    Positive
----------------*/
.ui.buttons.positive .button,
.ui.button.positive {
  background-color: #A1CF64;
  color: #FFFFFF;
}
.ui.buttons.positive .button.hover,
.ui.buttons.positive .button:hover,
.ui.button.positive.hover,
.ui.button.positive:hover {
  background-color: #7DDC5C;
  color: #FFFFFF;
}
.ui.buttons.positive .button.down,
.ui.buttons.positive .button:active,
.ui.button.positive.down,
.ui.button.positive:active {
  background-color: #7DDC5C;
  color: #FFFFFF;
}
/*---------------
     Negative
----------------*/
.ui.buttons.negative .button,
.ui.button.negative {
  background-color: #EF4D6D;
  color: #FFFFFF;
}
.ui.buttons.negative .button.hover,
.ui.buttons.negative .button:hover,
.ui.button.negative.hover,
.ui.button.negative:hover {
  background-color: #DE3859;
  color: #FFFFFF;
}
.ui.buttons.negative .button.down,
.ui.buttons.negative .button:active,
.ui.button.negative.down,
.ui.button.negative:active {
  background-color: #DE3859;
  color: #FFFFFF;
}
/*-------------------
        Sizes
--------------------*/
.ui.buttons.mini .button,
.ui.mini.button {
  font-size: 0.5625rem;
}
.ui.tiny.buttons .button,
.ui.tiny.button {
  font-size: 0.625rem;
}
.ui.small.buttons .button,
.ui.small.button {
  font-size: 0.75rem;
}
.ui.buttons .button,
.ui.button {
  font-size: 1rem;
}
.ui.large.buttons .button,
.ui.large.button {
  font-size: 1.125rem;
}
.ui.big.buttons .button,
.ui.big.button {
  font-size: 1.25rem;
}
.ui.huge.buttons .button,
.ui.huge.button {
  font-size: 1.375rem;
}
.ui.massive.buttons .button,
.ui.massive.button {
  font-size: 1.5rem;
  font-weight: bold;
}
.ui.gigantic.buttons .button,
.ui.gigantic.button {
  font-size: 2rem;
  font-weight: bold;
}
/*--------------
Containing Icon
---------------*/
.ui.button i {
  line-height: 1;
  margin-right: 0.2em;
}
/* left arrow icons */
.ui.button i.icon.left,
.ui.button i.icon.left-open,
.ui.button i.icon.left-dir {
  margin: 0em 0.2em 0em;
}
/* right positioned icons */
.ui.button i.icon.up,
.ui.button i.icon.up-open,
.ui.button i.icon.up-dir,
.ui.button i.icon.down,
.ui.button i.icon.down-open,
.ui.button i.icon.down-dir,
.ui.button i.icon.right,
.ui.button i.icon.right-open,
.ui.button i.icon.right-dir {
  margin: 0em;
}
/*--------------
    Icon Only
---------------*/
.ui.icon.buttons .button,
.ui.icon.button {
  padding: 0.75em;
}
.ui.icon.buttons .button i,
.ui.icon.button i {
  margin: 0em;
  vertical-align: top;
}
/*--------------
   Labeled Icon
---------------*/
.ui.labeled.icon.buttons .button .icon,
.ui.labeled.icon.button .icon {
  display: block;
  font-size: 1.5em;
  margin: 0em auto 0.3em;
}
/*--------------
     Toggle
---------------*/
/* Toggle (Modifies active state to give affordances) */
.ui.toggle.buttons .button.active,
.ui.buttons .button.toggle.active,
.ui.button.toggle.active {
  background-color: #BBF0A9;
  color: #1C8C21;
}
.ui.buttons.toggle .ui.button.active.hover,
.ui.buttons .ui.button.toggle.active.hover,
.ui.button.toggle.active.hover {
  color: #21A627;
  background-color: #BBF0A9;
  -webkit-box-shadow: 0px 0px 4px -2px rgba(0, 0, 0, 0.2) inset;
  -moz-box-shadow: 0px 0px 4px -2px rgba(0, 0, 0, 0.2) inset;
  box-shadow: 0px 0px 4px -2px rgba(0, 0, 0, 0.2) inset;
}
.ui.button.toggle.active.hover.down {
  background-color: #BBF0A9;
  color: #21A627;
  -webkit-box-shadow: 0px 1px 3px 0px rgba(67, 97, 53, 0.5) inset;
  -moz-box-shadow: 0px 1px 3px 0px rgba(67, 97, 53, 0.5) inset;
  box-shadow: 0px 1px 3px 0px rgba(67, 97, 53, 0.5) inset;
}
/*--------------
     Bubbly
---------------*/
.ui.button.bubbly {
  -webkit-border-radius: 1em;
  -moz-border-radius: 1em;
  border-radius: 1em;
}
/*--------------
     Attached
---------------*/
.ui.button.attached {
  display: block;
}
.ui.button.attached.top {
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: none;
  -webkit-border-radius: 0.3125em 0.3125em 0em 0em;
  -moz-border-radius: 0.3125em 0.3125em 0em 0em;
  border-radius: 0.3125em 0.3125em 0em 0em;
}
.ui.button.attached.bottom {
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-top: none;
  -webkit-border-radius: 0em 0em 0.3125em 0.3125em;
  -moz-border-radius: 0em 0em 0.3125em 0.3125em;
  border-radius: 0em 0em 0.3125em 0.3125em;
}
.ui.button.attached.left {
  display: inline-block;
  border-left: none;
  padding-right: 0.75em;
  text-align: right;
  border-right: 1px solid rgba(0, 0, 0, 0.1);
  -webkit-border-radius: 0.3125em 0em 0em 0.3125em;
  -moz-border-radius: 0.3125em 0em 0em 0.3125em;
  border-radius: 0.3125em 0em 0em 0.3125em;
}
.ui.button.attached.right {
  display: inline-block;
  padding-left: 0.75em;
  text-align: left;
  border-left: 1px solid rgba(0, 0, 0, 0.1);
  -webkit-border-radius: 0em 0.3125em 0.3125em 0em;
  -moz-border-radius: 0em 0.3125em 0.3125em 0em;
  border-radius: 0em 0.3125em 0.3125em 0em;
}
/* Button attached to a form element */
input + .ui.attached.button {
  display: inline-block;
  margin: 0 0 0 -1em;
  padding: 0.68em 1em;
  vertical-align: top;
  font-size: 0.825em;
  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.15) inset;
  -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.15) inset;
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.15) inset;
  -webkit-border-radius: 0em 0.3125em 0.3125em 0em;
  -moz-border-radius: 0em 0.3125em 0.3125em 0em;
  border-radius: 0em 0.3125em 0.3125em 0em;
}
input:focus + .ui.attached.button {
  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.3) inset;
  -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.3) inset;
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.3) inset;
}
.ui.attached.button.loading,
.ui.attached.button.loading.hover {
  opacity: 1;
}
/*******************************
      Buttons (Button Group)
*******************************/
.ui.buttons {
  overflow: hidden;
}
.ui.buttons .button {
  float: left;
  -webkit-border-radius: 0em;
  -moz-border-radius: 0em;
  border-radius: 0em;
  border-left: 1px solid rgba(0, 0, 0, 0.05);
}
.ui.buttons .button:first-child {
  margin-left: 0em;
  border-top-left-radius: 0.3125em;
  border-bottom-left-radius: 0.3125em;
}
.ui.buttons .button:last-child {
  border-top-right-radius: 0.3125em;
  border-bottom-right-radius: 0.3125em;
}
/* Vertical  Style */
.ui.buttons.vertical {
  display: inline-block;
}
.ui.buttons.vertical .button {
  display: block;
  float: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  border-left: none;
  box-shadow: none;
}
.ui.buttons.vertical .button:first-child,
.ui.buttons.vertical .mini.button:first-child,
.ui.buttons.vertical .tiny.button:first-child,
.ui.buttons.vertical .small.button:first-child,
.ui.buttons.vertical .massive.button:first-child,
.ui.buttons.vertical .huge.button:first-child,
.ui.buttons.vertical .gigantic.button:first-child {
  margin-top: 0px;
  -moz-border-radius: 0.3125em 0.3125em 0px 0px;
  -webkit-border-radius: 0.3125em 0.3125em 0px 0px;
  border-radius: 0.3125em 0.3125em 0px 0px;
}
.ui.buttons.vertical .button:last-child,
.ui.buttons.vertical .mini.button:last-child,
.ui.buttons.vertical .tiny.button:last-child,
.ui.buttons.vertical .small.button:last-child,
.ui.buttons.vertical .massive.button:last-child,
.ui.buttons.vertical .huge.button:last-child,
.ui.buttons.vertical .gigantic.button:last-child {
  -moz-border-radius: 0px 0px 0.3125em 0.3125em;
  -webkit-border-radius: 0px 0px 0.3125em 0.3125em;
  border-radius: 0px 0px 0.3125em 0.3125em;
}
/*******************************
       OR Button Divisions
*******************************/
.ui.buttons .or {
  position: relative;
  float: left;
  width: 0.3em;
  height: 1em;
}
.ui.buttons .or:before {
  position: absolute;
  top: 50%;
  left: 50%;
  content: 'or';
  background-color: #FFFFFF;
  margin-top: -0.15em;
  margin-left: -0.9em;
  width: 1.8em;
  height: 1.8em;
  line-height: 1.66;
  color: #AAAAAA;
  font-style: normal;
  font-weight: normal;
  text-align: center;
  -moz-box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.2) inset;
  -webkit-box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.2) inset;
  box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.2) inset;
  -moz-border-radius: 500px;
  -webkit-border-radius: 500px;
  border-radius: 500px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
.ui.buttons .or:after {
  position: absolute;
  top: 0em;
  left: 0em;
  content: ' ';
  width: 0.3em;
  height: 1.8em;
  background-color: transparent;
  border-top: 0.6em solid #FFFFFF;
  border-bottom: 0.6em solid #FFFFFF;
}
/* Fluid Or */
.ui.fluid.buttons .or {
  width: 0em !important;
}
.ui.fluid.buttons .or:after {
  display: none;
}
/*-------------------
       Attached
--------------------*/
/* Plural Attached */
.attached.ui.buttons {
  margin: 0px;
  -webkit-border-radius: 4px 4px 0px 0px;
  -moz-border-radius: 4px 4px 0px 0px;
  border-radius: 4px 4px 0px 0px;
}
.attached.ui.buttons .button:first-child {
  -webkit-border-radius: 4px 0px 0px 0px;
  -moz-border-radius: 4px 0px 0px 0px;
  border-radius: 4px 0px 0px 0px;
}
.attached.ui.buttons .button:last-child {
  -webkit-border-radius: 0px 4px 0px 0px;
  -moz-border-radius: 0px 4px 0px 0px;
  border-radius: 0px 4px 0px 0px;
}
/* Bottom Side */
.bottom.attached.ui.buttons {
  margin-top: -1px;
  -webkit-border-radius: 0px 0px 4px 4px;
  -moz-border-radius: 0px 0px 4px 4px;
  border-radius: 0px 0px 4px 4px;
}
.bottom.attached.ui.buttons .button:first-child {
  -webkit-border-radius: 0px 0px 0px 4px;
  -moz-border-radius: 0px 0px 0px 4px;
  border-radius: 0px 0px 0px 4px;
}
.bottom.attached.ui.buttons .button:last-child {
  -webkit-border-radius: 0px 0px 4px 0px;
  -moz-border-radius: 0px 0px 4px 0px;
  border-radius: 0px 0px 4px 0px;
}
/* Left Side */
.left.attached.ui.buttons {
  margin-left: -1px;
  -webkit-border-radius: 0px 4px 4px 0px;
  -moz-border-radius: 0px 4px 4px 0px;
  border-radius: 0px 4px 4px 0px;
}
.left.attached.ui.buttons .button:first-child {
  margin-left: -1px;
  -webkit-border-radius: 0px 4px 0px 0px;
  -moz-border-radius: 0px 4px 0px 0px;
  border-radius: 0px 4px 0px 0px;
}
.left.attached.ui.buttons .button:last-child {
  margin-left: -1px;
  -webkit-border-radius: 0px 0px 4px 0px;
  -moz-border-radius: 0px 0px 4px 0px;
  border-radius: 0px 0px 4px 0px;
}
/* Right Side */
.right.attached.ui.buttons,
.right.attached.ui.buttons .button {
  margin-right: -1px;
  -webkit-border-radius: 4px 0px 0px 4px;
  -moz-border-radius: 4px 0px 0px 4px;
  border-radius: 4px 0px 0px 4px;
}
.right.attached.ui.buttons .button:first-child {
  margin-left: -1px;
  -webkit-border-radius: 4px 0px 0px 0px;
  -moz-border-radius: 4px 0px 0px 0px;
  border-radius: 4px 0px 0px 0px;
}
.right.attached.ui.buttons .button:last-child {
  margin-left: -1px;
  -webkit-border-radius: 0px 0px 0px 4px;
  -moz-border-radius: 0px 0px 0px 4px;
  border-radius: 0px 0px 0px 4px;
}
/* Fluid */
.ui.fluid.buttons,
.ui.button.fluid,
.ui.fluid.buttons > .button {
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
.ui.two.fluid.buttons > .button {
  width: 50%;
}
.ui.three.fluid.buttons > .button {
  width: 33.333%;
}
.ui.four.fluid.buttons > .button {
  width: 25%;
}
.ui.five.fluid.buttons > .button {
  width: 20%;
}
.ui.six.fluid.buttons > .button {
  width: 16.666%;
}
.ui.seven.fluid.buttons > .button {
  width: 14.285%;
}
.ui.eight.fluid.buttons > .button {
  width: 12.500%;
}
.ui.nine.fluid.buttons > .button {
  width: 11.11%;
}
.ui.ten.fluid.buttons > .button {
  width: 10%;
}
.ui.eleven.fluid.buttons > .button {
  width: 9.09%;
}
.ui.twelve.fluid.buttons > .button {
  width: 8.3333%;
}
/* Fluid Vertical Buttons */
.ui.fluid.vertical.buttons,
.ui.fluid.vertical.buttons > .button {
  width: auto;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
.ui.two.fluid.buttons > .button {
  height: 50%;
}
.ui.three.fluid.buttons > .button {
  height: 33.333%;
}
.ui.four.fluid.buttons > .button {
  height: 25%;
}
.ui.five.fluid.buttons > .button {
  height: 20%;
}
.ui.six.fluid.buttons > .button {
  height: 16.666%;
}
.ui.seven.fluid.buttons > .button {
  height: 14.285%;
}
.ui.eight.fluid.buttons > .button {
  height: 12.500%;
}
.ui.nine.fluid.buttons > .button {
  height: 11.11%;
}
.ui.ten.fluid.buttons > .button {
  height: 10%;
}
.ui.eleven.fluid.buttons > .button {
  height: 9.09%;
}
.ui.twelve.fluid.buttons > .button {
  height: 8.3333%;
}