SemanSemantic-UItic-UI/examples/ui/button.css

/*******************************
           UI Button
*******************************/

/*--------------
 Standard Button
---------------*/

/* Normal */
.ui.button {
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;

  min-height: 1em;

  background-color: #F0F0F0;

  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 -2px 0px rgba(0, 0, 0, 0.1) inset
  ;
  -moz-box-shadow:
    0px -2px 0px rgba(0, 0, 0, 0.1) inset
  ;
  box-shadow:
    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
  ;
}

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

.ui.blue.buttons .button,
.ui.blue.button {
  background-color: #00B4AC;
  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 Button
----------------*/

.ui.purple.buttons .button,
.ui.purple.button {
  color: #FFFFFF;
  background-color: #6E4889;
}
.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 Button
----------------*/

.ui.button.green,
.ui.button.success {
  background-color: #7DDC5C;
  color: #FFFFFF;
}

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

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

/*--------------------
  Transparent Button
----------------------*/

.ui.transparent.buttons .button,
.ui.transparent.button {
  background-color: transparent;
  background-image: none;
  border: none;
  color: #777777;
}
.ui.transparent.buttons .button a,
.ui.transparent.button a {
  color: #777777;
}

/* Hover / Down */
.ui.transparent.buttons .button.hover,
.ui.transparent.buttons .button.down,
.ui.transparent.button.hover,
.ui.transparent.button.down {
  color: #555555;
}
.ui.transparent.buttons .button.hover a,
.ui.transparent.buttons .button.down a,
.ui.transparent.button.hover a,
.ui.transparent.button.down a {
  color: #555555;
}

.ui.transparent.buttons .button.down {
  background-color: rgba(0, 0, 0, 0.05);
  -webkit-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.15);
  box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.15);
}


/*-------------------
       Resizes
--------------------*/

.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: 6px 13px;
}
.ui.small.buttons .button,
.ui.small.button {
  font-size: 12px;
  padding: 6px 15px;
}
.ui.medium.buttons .button,
.ui.medium.button {
  font-size: 14px;
  padding: 7px 20px;
}
.ui.big.buttons .button,
.ui.big.button {
  font-size: 16px;
  padding: 13px 30px;
}
.ui.huge.buttons .button,
.ui.huge.button {
  font-size: 18px;
  padding: 15px 30px;
}
.ui.massive.buttons .button,
.ui.massive.button {
  padding: 15px 45px;

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

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


/*--------------
      Icons
---------------*/

.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;
}

/*--------------
      Labels
---------------*/

.ui.button .label {

}

/*******************************
            Modifiers
*******************************/

/* Image Buttons */
.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 (Modifies active state to give affordances) */
.ui.toggle.buttons .button.active,
.ui.buttons .button.toggle.active,
.ui.button.toggle.active {
  background-color: #BBF0A9;
}
.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.loading,
.ui.button.toggle.active.loading {
  border-color: #CCCCCC;
}
.ui.button.toggle.active.hover.down {
  border: 1px solid #77CF66;

  background-color: #B6F3A2;
  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 Variation */
.ui.button.bubbly {
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
}

/* 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;
}
.ui.attached.button.loading,
.ui.attached.button.loading.hover {
  opacity: 1;
}

/*-------------------
    Attached Style
--------------------*/

.ui.button.attached {
  display: block;
}
.ui.button.attached.top {
  margin-left: -1px;
  margin-right: -1px;
  -webkit-border-radius: 5px 5px 0px 0px;
  -moz-border-radius: 5px 5px 0px 0px;
  border-radius: 5px 5px 0px 0px;
}
.ui.button.attached.bottom {
  margin-left: -1px;
  margin-right: -1px;
  -webkit-border-radius: 0px 0px 5px 5px;
  -moz-border-radius: 0px 0px 5px 5px;
  border-radius: 0px 0px 5px 5px;
}


/*******************************
             States
*******************************/

/* Hover */
.ui.button.hover {
  background-color: #DDDDDD;
}
/* Down */
.ui.button.down {
  -webkit-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.2) inset;
  -moz-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.2) inset;
  box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.2) inset;
}

/* Active */
.ui.buttons .button.active,
.ui.button.active {
  background-color: #E6E6E6;
  background: -webkit-linear-gradient(top, #E9E9E9 0%, #F0F0F0 100%);
  background: -moz-linear-gradient(top, #E9E9E9 0%, #F0F0F0 100%);
  background: -o-linear-gradient(top, #E9E9E9 0%, #F0F0F0 100%);
  background: -ms-linear-gradient(top, #E9E9E9 0%, #F0F0F0 100%);
  background: linear-gradient(top, #E9E9E9 0%, #F0F0F0 100%);


  -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-linear-gradient(top, #E8E8E8 0%, #E0E0E0 100%);
  background: #E0E0E0 -moz-linear-gradient(top, #E8E8E8 0%, #E0E0E0 100%);
  background: #E0E0E0 -o-linear-gradient(top, #E8E8E8 0%, #E0E0E0 100%);
  background: #E0E0E0 -ms-linear-gradient(top, #E8E8E8 0%, #E0E0E0 100%);
  background: #E0E0E0 linear-gradient(top, #E8E8E8 0%, #E0E0E0 100%);

  -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;
}
.ui.buttons .button.active.hover.down,
.ui.button.active.hover.down {
  background: #E0E0E0 -webkit-linear-gradient(top, #E0E0E0 0%, #E8E8E8 100%);
  background: #E0E0E0 -moz-linear-gradient(top, #E0E0E0 0%, #E8E8E8 100%);
  background: #E0E0E0 -o-linear-gradient(top, #E0E0E0 0%, #E8E8E8 100%);
  background: #E0E0E0 -ms-linear-gradient(top, #E0E0E0 0%, #E8E8E8 100%);
  background: #E0E0E0 linear-gradient(top, #E0E0E0 0%, #E8E8E8 100%);
}




/*******************************
            Loading
*******************************/

/* 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: '';
  /* standard */
  background: url(/images/ui/throbber-blue-tiny.gif) no-repeat 50% 50%;
  /* css 3 multi image */
  background-image: url(/images/ui/throbber-blue-tiny.gif);
  background-image: url(/images/ui/throbber-blue-tiny.gif);
  background-image: url(/images/ui/throbber-blue-tiny.gif);
  background-image: url(/images/ui/throbber-blue-tiny.gif);
  background-image: url(/images/ui/throbber-blue-tiny.gif);
  background-position: 50% 50%, 0px 0px;
  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;
  /* standard */
  background: url(/images/ui/throbber-tiny.gif) no-repeat 50% 50%;
  /* css 3 multi image */
  background-image: url(/images/ui/throbber-tiny.gif);
  background-image: url(/images/ui/throbber-tiny.gif);
  background-image: url(/images/ui/throbber-tiny.gif);
  background-image: url(/images/ui/throbber-tiny.gif);
  background-image: url(/images/ui/throbber-tiny.gif);
  background-position: 50% 50%, 0px 0px;
  background-repeat: no-repeat;
}

/* resizes */

/* blue */
.ui.huge.button.loading:after {
  background-image: url(/images/ui/throbber-blue-small.gif);
  background-image: url(/images/ui/throbber-blue-small.gif);
  background-image: url(/images/ui/throbber-blue-small.gif);
  background-image: url(/images/ui/throbber-blue-small.gif);
  background-image: url(/images/ui/throbber-blue-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/ui/throbber-blue-medium.gif);
  background-image: url(/images/ui/throbber-blue-medium.gif);
  background-image: url(/images/ui/throbber-blue-medium.gif);
  background-image: url(/images/ui/throbber-blue-medium.gif);
  background-image: url(/images/ui/throbber-blue-medium.gif);
}

/* grey */
.ui.huge.grey.button.loading:after,
.ui.huge.button.loading.active:after {
  background-image: url(/images/ui/throbber-small.gif);
  background-image: url(/images/ui/throbber-small.gif);
  background-image: url(/images/ui/throbber-small.gif);
  background-image: url(/images/ui/throbber-small.gif);
  background-image: url(/images/ui/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/ui/throbber-medium.gif);
  background-image: url(/images/ui/throbber-medium.gif);
  background-image: url(/images/ui/throbber-medium.gif);
  background-image: url(/images/ui/throbber-medium.gif);
  background-image: url(/images/ui/throbber-medium.gif);
}


/*******************************
         Error States
*******************************/

.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;

  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.buttons .button.error:after,
.ui.buttons .button.error.hover:after,
.ui.buttons .button.error.down:after,
.ui.button.error:after,
.ui.button.error.hover:after,
.ui.button.error.down:after {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  content: '';
  /* standard */
  background: #EE141D url(/images/ui/button-error.gif) no-repeat 50% 50%;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

.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: #BBBBBB;
  background-color: #F8F8F8 !important;
  background-image: none !important;
  
  text-shadow: none !important;

  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important;
}


/*******************************
      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 0px 1px rgba(0, 0, 0, 0.6) inset;
  -webkit-box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.6) inset;
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.6) 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: 2px solid #FFFFFF;
  border-bottom: 2px solid #FFFFFF;
}


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

  padding-top: 5px;
  width: 22px;
  height: 22px;

  font-size: 12px;
}
.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;
}




/* Wide Style */
.ui.buttons.wide {
  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.06) 0%, rgba(0, 0, 0, 0.03) 100%);
  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.06) 0%, rgba(0, 0, 0, 0.03) 100%);
  background: -o-linear-gradient(top, rgba(0, 0, 0, 0.06) 0%, rgba(0, 0, 0, 0.03) 100%);
  background: -ms-linear-gradient(top, rgba(0, 0, 0, 0.06) 0%, rgba(0, 0, 0, 0.03) 100%);
  background: linear-gradient(top, rgba(0, 0, 0, 0.06) 0%, rgba(0, 0, 0, 0.03) 100%);

  -webkit-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.15) inset;
  -moz-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.15) inset;
  box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.15) inset;

  border-radius: 3px;
  padding-bottom: 0px;
}
.ui.buttons.wide .button:last-child {
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
}


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