Button

button.css provide common style for button

Configuration

Loupe has base configurations enables user to customize basic style easily.

More deitails, check app/sass/_helpers.scss directory.

  • Button Base Color ($btn-basic-color) : #8bcd4d;
  • Button Attention Color ($btn-attention-color) : #e94e1c;
  • Button Disable Color ($btn-disabled-color): #999999;

Base Structure

Button sytling uses two main block, .button-container and .button

You can use font icon instead of some text for button label

@charset "UTF-8";
.button-container {
  background-color: #8bcd4d;
  color: #fff;
  cursor: pointer;
  text-align: center;
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.5;
  margin: 16px 0 24px;
  margin: 1rem 0 1.5rem;
  position: relative;
  -webkit-box-shadow: 0px 8px 0px 0px #71b433, inset 0px 1px 0px 0px rgba(255, 255, 255, 0.5);
  -moz-box-shadow: 0px 8px 0px 0px #71b433, inset 0px 1px 0px 0px rgba(255, 255, 255, 0.5);
  box-shadow: 0px 8px 0px 0px #71b433, inset 0px 1px 0px 0px rgba(255, 255, 255, 0.5);
  -webkit-border-radius: 0.488rem;
  -moz-border-radius: 0.488rem;
  -ms-border-radius: 0.488rem;
  -o-border-radius: 0.488rem;
  border-radius: 0.488rem;
  -webkit-transition-duration: 0.05s;
  -moz-transition-duration: 0.05s;
  -o-transition-duration: 0.05s;
  transition-duration: 0.05s;
  -webkit-transition-timing-function: ease-in;
  -moz-transition-timing-function: ease-in;
  -o-transition-timing-function: ease-in;
  transition-timing-function: ease-in;
}
.button-container .button {
  display: block;
  padding: 16px;
  padding: 1rem;
  min-height: 8px;
  min-height: 2.469rem;
}
.button-container.tapped, .button-container:active, .button-container:hover:active {
  background-color: #86cb45;
  top: 7px;
  -webkit-box-shadow: 0px 1px 0px 0px #71b433, inset 0px 1px 0px 0px rgba(255, 255, 255, 0.5);
  -moz-box-shadow: 0px 1px 0px 0px #71b433, inset 0px 1px 0px 0px rgba(255, 255, 255, 0.5);
  box-shadow: 0px 1px 0px 0px #71b433, inset 0px 1px 0px 0px rgba(255, 255, 255, 0.5);
}

.button-container-top {
  margin: 0 0 24px;
  margin: 0 0 1.5rem;
}

Aligning buttons

If you want to align two butotns horizontally. use .button-container-two class with .butotn-container like the following

Note: Some mobile devices has only 320px width, so the aligned two buttons might be a little too small to tap them.

You can also align three buttons optionally.

.button-container-two {
  display: inline-block;
  width: 49%;
  margin-right: 0 0.5%;
}

.button-container-three {
  display: inline-block;
  width: 32.33333%;
  margin-right: 0 0.5%;
}

Disbaled Button

With .button-cotainer-disbaled, no action even when user hovers or taps it.

.button-container-disabled {
  background-color: #999999;
  color: #666;
  cursor: auto;
  -webkit-box-shadow: 0px 8px 0px 0px transparent, inset 0px 1px 0px 0px transparent;
  -moz-box-shadow: 0px 8px 0px 0px transparent, inset 0px 1px 0px 0px transparent;
  box-shadow: 0px 8px 0px 0px transparent, inset 0px 1px 0px 0px transparent;
  -webkit-border-radius: 0.488rem;
  -moz-border-radius: 0.488rem;
  -ms-border-radius: 0.488rem;
  -o-border-radius: 0.488rem;
  border-radius: 0.488rem;
}
.button-container-disabled.tapped, .button-container-disabled:active, .button-container-disabled:hover:active {
  background-color: #999999;
  top: 0;
  -webkit-box-shadow: 0px 8px 0px 0px transparent, inset 0px 1px 0px 0px transparent;
  -moz-box-shadow: 0px 8px 0px 0px transparent, inset 0px 1px 0px 0px transparent;
  box-shadow: 0px 8px 0px 0px transparent, inset 0px 1px 0px 0px transparent;
}

Attention Button

You can change button color with .button-cotainer-attention

.button-container-caution,
.button-container-attention {
  background-color: #e94e1c;
  -webkit-box-shadow: 0px 8px 0px 0px #bf3d13, inset 0px 1px 0px 0px rgba(255, 255, 255, 0.5);
  -moz-box-shadow: 0px 8px 0px 0px #bf3d13, inset 0px 1px 0px 0px rgba(255, 255, 255, 0.5);
  box-shadow: 0px 8px 0px 0px #bf3d13, inset 0px 1px 0px 0px rgba(255, 255, 255, 0.5);
  -webkit-border-radius: radius;
  -moz-border-radius: radius;
  -ms-border-radius: radius;
  -o-border-radius: radius;
  border-radius: radius;
}
.button-container-caution.tapped, .button-container-caution:active, .button-container-caution:hover:active,
.button-container-attention.tapped,
.button-container-attention:active,
.button-container-attention:hover:active {
  background-color: #e54916;
  top: 7px;
  -webkit-box-shadow: 0px 1px 0px 0px #bf3d13, inset 0px 1px 0px 0px rgba(255, 255, 255, 0.5);
  -moz-box-shadow: 0px 1px 0px 0px #bf3d13, inset 0px 1px 0px 0px rgba(255, 255, 255, 0.5);
  box-shadow: 0px 1px 0px 0px #bf3d13, inset 0px 1px 0px 0px rgba(255, 255, 255, 0.5);
}

With Icon

If you want to add icon image inside button, use with .with-icon class

.button-container.with-icon .button-icon, .button-container.with-icon .button {
  display: inline-block;
  vertical-align: middle;
  padding: 16px 0;
  padding: 1rem 0;
}

With Undo Button

.button-container-undo class provies undo button styling like the following

.button-container-undo {
  cursor: auto;
  min-height: 8px;
  min-height: 2.469rem;
  padding: 16px;
  padding: 1rem;
  text-align: left;
}
.button-container-undo:active, .button-container-undo:hover:active {
  background-color: #8bcd4d;
  top: 0;
  -webkit-box-shadow: 0px 8px 0px 0px #71b433, inset 0px 1px 0px 0px rgba(255, 255, 255, 0.5);
  -moz-box-shadow: 0px 8px 0px 0px #71b433, inset 0px 1px 0px 0px rgba(255, 255, 255, 0.5);
  box-shadow: 0px 8px 0px 0px #71b433, inset 0px 1px 0px 0px rgba(255, 255, 255, 0.5);
}
.button-container-undo .button-icon, .button-container-undo .button-label {
  display: inline-block;
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.5;
  vertical-align: middle;
}
.button-container-undo .button-undo {
  position: absolute;
  border-left: 1px solid #71b433;
  display: block;
  top: 0;
  right: 0;
  height: 100%;
}
.button-container-undo .button-undo-inner {
  border-left: 1px solid #bfe39d;
  cursor: pointer;
  display: block;
  font-size: 18px;
  font-size: 1.125rem;
  height: 100%;
  line-height: 35px;
  line-height: 2.2rem;
  padding: 10px;
  padding: 0.625rem;
  width: 100%;
}