SemanSemantic-UItic-UI/docs/ui/shaded/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: #FAFAFA;

  background-image: -webkit-linear-gradient(transparent 0%, rgba(0, 0, 0, 0.06) 100%);
  background-image: -moz-linear-gradient(transparent 0%, rgba(0, 0, 0, 0.06) 100%);
  background-image: -o-linear-gradient(transparent 0%, rgba(0, 0, 0, 0.06) 100%);
  background-image: -ms-linear-gradient(transparent 0%, rgba(0, 0, 0, 0.06) 100%);
  background-image: linear-gradient(transparent 0%, rgba(0, 0, 0, 0.06) 100%);

  padding: 12px 30px;

  font-size: 14px;
  text-transform: uppercase;
  line-height: 1;
  font-weight: bold;
  color: #7A7A7A;
  text-align: center;

  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;

  -webkit-box-shadow:
    0px 0px 0px 1px rgba( 0, 0, 0, 0.15),
    0px -2px 0px rgba(0, 0, 0, 0.1) inset
  ;
  -moz-box-shadow:
    0px 0px 0px 1px rgba( 0, 0, 0, 0.15),
    0px -2px 0px rgba(0, 0, 0, 0.1) inset
  ;
  box-shadow:
    0px 0px 0px 1px rgba( 0, 0, 0, 0.15),
    0px -2px 0px 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 {
  background-color: #FFFFFF;
}

/*--------------
  Down (:active) 
---------------*/

/* Down */
.ui.button.down {
  -webkit-box-shadow: 
    0px 0px 0px 1px rgba( 0, 0, 0, 0.15),
    1px 1px 3px 0px rgba(0, 0, 0, 0.2) inset
  ;
  -moz-box-shadow: 
    0px 0px 0px 1px rgba( 0, 0, 0, 0.15),
    1px 1px 3px 0px rgba(0, 0, 0, 0.2) inset
  ;
  box-shadow: 
    0px 0px 0px 1px rgba( 0, 0, 0, 0.15),
    1px 1px 3px 0px rgba(0, 0, 0, 0.2) inset
  ;
}


/*--------------
     Active 
---------------*/

.ui.buttons .button.active,
.ui.button.active {
  background-color: #E6E6E6;
  -webkit-box-shadow:
    0px 1px 6px -3px rgba(0, 0, 0, 0.3) inset
  ;
  -moz-box-shadow:
    0px 1px 6px -3px rgba(0, 0, 0, 0.3) inset
  ;
  box-shadow:
    0px 1px 6px -3px rgba(0, 0, 0, 0.3) 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 1px 3px 0px rgba(0, 0, 0, 0.2) inset;
  -moz-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2) inset;
  box-shadow: 0px 1px 3px 0px 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 {
  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: 0px;
  left: 0px;
  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: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}
/* 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 State */
.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
*******************************/


/*---------------
      Blue
----------------*/

.ui.blue.buttons .button,
.ui.blue.button {
  background-color: #00B4AC;
  background-image: -webkit-linear-gradient(transparent 0%, rgba(0, 0, 0, 0.15) 100%);
  background-image: -moz-linear-gradient(transparent 0%, rgba(0, 0, 0, 0.15) 100%);
  background-image: -o-linear-gradient(transparent 0%, rgba(0, 0, 0, 0.15) 100%);
  background-image: -ms-linear-gradient(transparent 0%, rgba(0, 0, 0, 0.15) 100%);
  background-image: linear-gradient(transparent 0%, rgba(0, 0, 0, 0.15) 100%);
  color: #FFFFFF;
}
.ui.blue.buttons .button.hover,
.ui.blue.button.hover {
  background-color: #F15B40;
}
.ui.blue.buttons .button.down,
.ui.blue.button.down {
  background-color: #F15B40;
}

/*---------------
    Purple
----------------*/

.ui.purple.buttons .button,
.ui.purple.button {
  color: #FFFFFF;
  background-color: #6E4889;
  background-image: -webkit-linear-gradient(transparent 0%, rgba(0, 0, 0, 0.15) 100%);
  background-image: -moz-linear-gradient(transparent 0%, rgba(0, 0, 0, 0.15) 100%);
  background-image: -o-linear-gradient(transparent 0%, rgba(0, 0, 0, 0.15) 100%);
  background-image: -ms-linear-gradient(transparent 0%, rgba(0, 0, 0, 0.15) 100%);
  background-image: linear-gradient(transparent 0%, rgba(0, 0, 0, 0.15) 100%);
}
.ui.purple.buttons .button.hover,
.ui.purple.button.hover {
  background-color: #62397F;
}
.ui.purple.buttons .button.down,
.ui.purple.button.down {
  background-color: #9254BD;
}

/*---------------
Green / Positive
----------------*/

.ui.button.green,
.ui.button.positive {
  background-color: #7DDC5C;
  background-image: -webkit-linear-gradient(transparent 0%, rgba(0, 0, 0, 0.15) 100%);
  background-image: -moz-linear-gradient(transparent 0%, rgba(0, 0, 0, 0.15) 100%);
  background-image: -o-linear-gradient(transparent 0%, rgba(0, 0, 0, 0.15) 100%);
  background-image: -ms-linear-gradient(transparent 0%, rgba(0, 0, 0, 0.15) 100%);
  background-image: linear-gradient(transparent 0%, rgba(0, 0, 0, 0.15) 100%);
  color: #FFFFFF;
}

.ui.button.green.hover,
.ui.button.positive.hover {
  background-color: #7FE95A;
  color: #FFFFFF;
}

.ui.button.green.down,
.ui.button.positive.down {
  background-color: #59B94B;
  color: #FFFFFF;
}

/*---------------
Red / Negative
----------------*/

.ui.button.red,
.ui.button.negative {
  background-color: #EF3F49;
  background-image: -webkit-linear-gradient(transparent 0%, rgba(0, 0, 0, 0.15) 100%);
  background-image: -moz-linear-gradient(transparent 0%, rgba(0, 0, 0, 0.15) 100%);
  background-image: -o-linear-gradient(transparent 0%, rgba(0, 0, 0, 0.15) 100%);
  background-image: -ms-linear-gradient(transparent 0%, rgba(0, 0, 0, 0.15) 100%);
  background-image: linear-gradient(transparent 0%, rgba(0, 0, 0, 0.15) 100%);
  color: #FFFFFF;
}

.ui.button.red.hover,
.ui.button.negative.hover {
  background-color: #FE313C;
  color: #FFFFFF;
}

.ui.button.red.down,
.ui.button.negative.down {
  background-color: #DC323C;
  color: #FFFFFF;
}

/*-------------------
       Sizes
--------------------*/

.ui.buttons.mini .button,
.ui.mini.button {
  font-size: 9px;
  padding: 4px 5px;
  border-radius: 3px;
}
.ui.buttons.mini .button i,
.ui.mini.button i {
  vertical-align: top;
}
.ui.tiny.buttons .button,
.ui.tiny.button {
  font-size: 11px;
  font-weight: bold;
  padding: 8px 15px;
}
.ui.small.buttons .button,
.ui.small.button {
  font-size: 12px;
  padding: 10px 20px;
}
.ui.medium.buttons .button,
.ui.medium.button {
  font-size: 14px;
  padding: 12px 30px;
}
.ui.large.buttons .button,
.ui.large.button {
  font-size: 16px;
  padding: 15px 30px;
}
.ui.big.buttons .button,
.ui.big.button {
  font-size: 18px;
  padding: 15px 30px;
}
.ui.huge.buttons .button,
.ui.huge.button {
  font-size: 20px;
  padding: 18px 30px;
}
.ui.massive.buttons .button,
.ui.massive.button {
  padding: 20px 45px;

  font-size: 24px;
  font-weight: bold;
}
.ui.gigantic.buttons .button,
.ui.gigantic.button {
  padding: 18px 45px;

  font-size: 30px;
  font-weight: bold;
}

.ui.mini.button,
.ui.tiny.button {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}


/*--------------
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: 7px;
  text-align: center;
}
.ui.icon.buttons .button i,
.ui.icon.button i {
  margin: 0px;
  vertical-align: text-top;
}
/* Image Button Resizes */
.ui.icon.buttons.mini .button,
.ui.mini.icon.button {
  padding: 4px;
}
.ui.tiny.icon.buttons .button,
.ui.tiny.icon.button {
  padding: 6px;
}
.ui.small.icon.buttons .button,
.ui.small.icon.button {
  padding: 6px;
}
.ui.medium.icon.buttons .button,
.ui.medium.icon.button {
  padding: 7px;
}
.ui.big.icon.buttons .button,
.ui.big.icon.button {
  padding: 10px;
}
.ui.huge.icon.buttons .button,
.ui.huge.icon.button {
  padding: 11px;
}
.ui.massive.icon.buttons .button,
.ui.massive.icon.button {
  padding: 15px;
}
.ui.gigantic.icon.buttons .button,
.ui.gigantic.icon.button {
  padding: 18px;
}


/*--------------
     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: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
}


/*--------------
     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: 5px 5px 0px 0px;
  -moz-border-radius: 5px 5px 0px 0px;
  border-radius: 5px 5px 0px 0px;
}
.ui.button.attached.bottom {
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-top: none;

  -webkit-border-radius: 0px 0px 5px 5px;
  -moz-border-radius: 0px 0px 5px 5px;
  border-radius: 0px 0px 5px 5px;
}
.ui.button.attached.left {
  display: inline-block;
  border-left: none;

  border-right: 1px solid rgba(0, 0, 0, 0.1);
  
  -webkit-border-radius: 5px 0px 0px 5px;
  -moz-border-radius: 5px 0px 0px 5px;
  border-radius: 5px 0px 0px 5px;
}
.ui.button.attached.right {
  display: inline-block;
  
  border-left: 1px solid rgba(0, 0, 0, 0.1);

  -webkit-border-radius: 0px 5px 5px 0px;
  -moz-border-radius: 0px 5px 5px 0px;
  border-radius: 0px 5px 5px 0px;
}

/* Button attached to a form element */
input + .ui.attached.button {
  display: inline-block;
  min-width: 40px;
  margin: 0px 0px 0px -15px;
  height: 14px;
  padding: 8px 15px;
  border: 1px solid #D0D0D0;

  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;

  -webkit-border-radius: 0px 5px 5px 0px;
  -moz-border-radius: 0px 5px 5px 0px;
  border-radius: 0px 5px 5px 0px;

  vertical-align: top;
}
input + .ui.attached.button.down {
  -webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3) inset;
  -moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3) inset;
  box-shadow: 0px 0px 2px 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,
.ui.buttons .mini.button,
.ui.buttons .tiny.button,
.ui.buttons .small.button,
.ui.buttons .massive.button,
.ui.buttons .huge.button,
.ui.buttons .gigantic.button {
  float: left;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
}
.ui.buttons .button:first-child,
.ui.buttons .mini.button:first-child,
.ui.buttons .tiny.button:first-child,
.ui.buttons .small.button:first-child,
.ui.buttons .massive.button:first-child,
.ui.buttons .huge.button:first-child,
.ui.buttons .gigantic.button:first-child {
  margin-left: 0px;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.ui.buttons .button:last-child,
.ui.buttons .mini.button:last-child,
.ui.buttons .tiny.button:last-child,
.ui.buttons .small.button:last-child,
.ui.buttons .massive.button:last-child,
.ui.buttons .huge.button:last-child,
.ui.buttons .gigantic.button:last-child {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

/* Vertical  Style */
.ui.buttons.vertical {
  display: inline-block;
}
.ui.buttons.vertical .button {
  display: block;
  float: 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: 5px 5px 0px 0px;
  -webkit-border-radius: 5px 5px 0px 0px;
  border-radius: 5px 5px 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 5px 5px;
  -webkit-border-radius: 0px 0px 5px 5px;
  border-radius: 0px 0px 5px 5px;
}

/* Only show multiple borders when changing colors in group */
.ui.buttons .grey.button + .grey.button,
.ui.buttons .blue.button + .blue.button,
.ui.buttons .purple.button + .purple.button,
.ui.buttons .green.button + .green.button {
  margin-left: -1px;
}
.ui.vertical.buttons .grey.button + .grey.button,
.ui.vertical.buttons .blue.button + .blue.button,
.ui.vertical.buttons .purple.button + .purple.button,
.ui.vertical.buttons .green.button + .green.button {
  margin-top: -1px;
}

/*******************************
       OR Button Divisions
*******************************/

.ui.buttons .or {
  position: relative;
  float: left;
}
.ui.buttons .or:before {
  position: absolute;
  top: 50%;
  left: 50%;
  content: 'or';
  background-color: #FFFFFF;

  line-height: 1;
  color: #AAAAAA;
  font-style: italic;
  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: 0px;
  left: 0px;
  content: ' ';

  background-color: transparent;
  border-top: 3px solid #FFFFFF;
}


/* Or Sizes */
.ui.buttons .or {
  width: 5px;
  height: 38px;
}
.ui.buttons .or:before {
  margin-top: -15px;
  margin-left: -15px;

  padding-top: 6px;
  width: 28px;
  height: 28px;

  font-style: normal;
  font-weight: bold;
}
.ui.buttons .or:after {
  top: 4px;
  width: 5px;
  height: 18px;
}
.ui.fluid.buttons .or {
  width: 0px !important;
}
.ui.fluid.buttons .or:after{
  display: none;
}

/* mini */
.ui.mini.buttons .or,
.ui.buttons .mini.or {
  height: 19px;
}
.ui.mini.buttons .or:before,
.ui.buttons .mini.or:before {
  margin-left: -8px;
  margin-top: -6px;

  padding-top: 2px;
  width: 14px;
  height: 14px;

  font-size: 9px;
}
.ui.mini.buttons .or:after,
.ui.buttons .mini.or:after {
  top: 3px;
  width: 4px;
  height: 10px;
}

/* tiny */
.ui.tiny.buttons .or,
.ui.buttons .tiny.or {
  height: 26px;
}
.ui.tiny.buttons .or:before,
.ui.buttons .tiny.or:before {
  margin-left: -11px;
  margin-top: -10px;

  padding-top: 4px;
  width: 20px;
  height: 19px;

  font-size: 11px;
}
.ui.tiny.buttons .or:after,
.ui.buttons .tiny.or:after {
  top: 2px;
  width: 5px;
  height: 16px;
}

/* small */
.ui.small.buttons .or,
.ui.buttons .small.or {
  height: 26px;
}
.ui.small.buttons .or:before,
.ui.buttons .small.or:before {
  margin-left: -11px;
  margin-top: -10px;

  padding-top: 4px;
  width: 20px;
  height: 19px;

  font-size: 11px;
}
.ui.small.buttons .or:after,
.ui.buttons .small.or:after {
  top: 2px;
  width: 5px;
  height: 16px;
}

/* big */
.ui.big.buttons .or,
.ui.buttons .big.or {

}
.ui.big.buttons .or:before,
.ui.buttons .big.or:before {
  margin-left: -14px;
  margin-top: -8px;

  padding-top: 5px;
  width: 26px;
  height: 25px;

  font-size: 14px;
}
.ui.big.buttons .or:after,
.ui.buttons .big.or:after {
  top: 5px;
  width: 5px;
  height: 22px;
}

/* huge */
.ui.huge.buttons .or,
.ui.buttons .huge.or {
  width: 6px;
  height: 41px;
}
.ui.huge.buttons .or:before,
.ui.buttons .huge.or:before {
  margin-left: -15px;
  margin-top: -14px;

  padding-top: 6px;
  width: 30px;
  height: 29px;

  font-size: 15px;
}
.ui.huge.buttons .or:after, 
.ui.buttons .huge.or:after {
  top: 6px;
  width: 6px;
  height: 26px;
}

/*-------------------
       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%;
}