buttons/_demo/assets/css/demo.autoprefixed.css

How many ways are there to build a button with Assemble? Many.

@import url(http://fonts.googleapis.com/css?family=Kite+One);

* {
  margin: 0;
  padding: 0;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.warning {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 0.5rem;
  background: -webkit-linear-gradient(#fff94d, #ddd610);
  background: -o-linear-gradient(#fff94d, #ddd610);
  background: linear-gradient(#fff94d, #ddd610);
  opacity: 0.95;
  text-align: center;
  z-index: 1000;
}

.no-transitions,
.no-transitions * {
  -webkit-transition: none !important;
  -o-transition: none !important;
  transition: none !important;
}

.group:after {
  content: "";
  display: block;
  clear: both;
}

:root {
  font-size: large;
  line-height: 1.4;
}

@media (max-width: 500px) {
  :root {
    font-size: small;
  }
}

html,
body {
  height: 100%;
}

body {
  background: #eee;
  font-family: Sans-serif;
  overflow-x: hidden;
  padding: 4rem;
}

@media (max-width: 500px) {
  body {
    padding: 1rem;
  }
}

.page-wrap {
  float: right;
  width: 100%;
}

.effeckt {
  padding: 2rem;
  background: white;
  margin: 0 0 1rem 0;
}

@media (max-width: 500px) {
  .effeckt {
    padding: 1.5rem;
  }
}

.effeckt header {
  margin: 0 0 1rem 0;
  border-bottom: 2px solid #eee;
  position: relative;
}

.effeckt header .source {
  position: absolute;
  right: 0;
  bottom: 2px;
}

@media (max-width: 500px) {
  .effeckt header .source {
    position: relative;
    display: block;
    margin: 0.2rem 0;
  }
}

.button-group {
  line-height: 2;
}

a {
  text-decoration: none;
  color: #ccc;
}

a:hover,
a:active {
  color: black;
}

subhead {
  display: block;
  font-size: 1.4rem;
  margin: 0 0 2rem 0;
}

.mobile-break {
  display: none;
}

@media (max-width: 500px) {
  .mobile-break {
    display: block;
  }
}

h1 {
  margin: 0 0 1rem 0;
}

@media (max-width: 500px) {
  h1 {
    line-height: 0.8;
  }
}

h1 span {
  font-size: 1.5rem;
  position: relative;
  display: inline-block;
  opacity: 0;
  width: 50px;
  height: 50px;
  line-height: 50px;
  background: #ccc;
  color: white;
  text-align: center;
  text-transform: uppercase;
}

@media (max-width: 500px) {
  h1 span {
    font-size: 0.8rem;
    width: 28px;
    height: 28px;
    line-height: 28px;
  }
}

h2 {
  margin: 0;
}

h3 {
  margin: 0;
}

h4 {
  margin: 0 0 0.5rem 0;
}

p,
ul,
ol,
blockquote,
pre {
  margin: 0 0 1rem 0;
}

button {
  padding: 0.25rem;
}

hr {
  height: 0;
  border: 0;
  border-top: 1px solid #ccc;
}

h1 span:nth-of-type(1) {
  -webkit-animation: logo-from-horz 0.5s ease forwards;
  -o-animation: logo-from-horz 0.5s ease forwards;
  animation: logo-from-horz 0.5s ease forwards;
  -webkit-transform: translateX(-50px);
  -ms-transform: translateX(-50px);
  -o-transform: translateX(-50px);
  transform: translateX(-50px);
  background: #666;
}

h1 span:nth-of-type(2) {
  -webkit-animation: logo-from-vert 0.5s 0.1s ease forwards;
  -o-animation: logo-from-vert 0.5s 0.1s ease forwards;
  animation: logo-from-vert 0.5s 0.1s ease forwards;
  -webkit-transform: translateY(-50px);
  -ms-transform: translateY(-50px);
  -o-transform: translateY(-50px);
  transform: translateY(-50px);
  background: #444;
}

h1 span:nth-of-type(3) {
  -webkit-animation: logo-from-vert 0.5s 0.2s ease forwards;
  -o-animation: logo-from-vert 0.5s 0.2s ease forwards;
  animation: logo-from-vert 0.5s 0.2s ease forwards;
  -webkit-transform: translateX(50px);
  -ms-transform: translateX(50px);
  -o-transform: translateX(50px);
  transform: translateX(50px);
  background: #666;
}

h1 span:nth-of-type(4) {
  -webkit-animation: logo-from-horz 0.3s 0.3s ease forwards;
  -o-animation: logo-from-horz 0.3s 0.3s ease forwards;
  animation: logo-from-horz 0.3s 0.3s ease forwards;
  -webkit-transform: translateX(50px);
  -ms-transform: translateX(50px);
  -o-transform: translateX(50px);
  transform: translateX(50px);
  background: #444;
}

h1 span:nth-of-type(5) {
  -webkit-animation: logo-from-horz 0.3s 0.4s ease forwards;
  -o-animation: logo-from-horz 0.3s 0.4s ease forwards;
  animation: logo-from-horz 0.3s 0.4s ease forwards;
  -webkit-transform: translateX(-50px);
  -ms-transform: translateX(-50px);
  -o-transform: translateX(-50px);
  transform: translateX(-50px);
  background: #666;
}

h1 span:nth-of-type(6) {
  -webkit-animation: logo-from-horz 0.3s 0.5s ease forwards;
  -o-animation: logo-from-horz 0.3s 0.5s ease forwards;
  animation: logo-from-horz 0.3s 0.5s ease forwards;
  -webkit-transform: translateX(50px);
  -ms-transform: translateX(50px);
  -o-transform: translateX(50px);
  transform: translateX(50px);
  background: #444;
}

h1 span:nth-of-type(7) {
  -webkit-animation: logo-from-vert 0.3s 0.6s ease forwards;
  -o-animation: logo-from-vert 0.3s 0.6s ease forwards;
  animation: logo-from-vert 0.3s 0.6s ease forwards;
  -webkit-transform: translateY(-50px);
  -ms-transform: translateY(-50px);
  -o-transform: translateY(-50px);
  transform: translateY(-50px);
  background: #666;
}

h1 span:nth-of-type(8) {
  -webkit-animation: logo-from-horz 0.2s 1.1s ease forwards;
  -o-animation: logo-from-horz 0.2s 1.1s ease forwards;
  animation: logo-from-horz 0.2s 1.1s ease forwards;
  -webkit-transform: translateX(1000px);
  -ms-transform: translateX(1000px);
  -o-transform: translateX(1000px);
  transform: translateX(1000px);
  background: none;
  color: black;
}

h1 span:nth-of-type(9) {
  -webkit-animation: logo-from-horz 0.2s 1.1s ease forwards;
  -o-animation: logo-from-horz 0.2s 1.1s ease forwards;
  animation: logo-from-horz 0.2s 1.1s ease forwards;
  -webkit-transform: translateX(1000px);
  -ms-transform: translateX(1000px);
  -o-transform: translateX(1000px);
  transform: translateX(1000px);
}

h1 span:nth-of-type(10) {
  -webkit-animation: logo-from-horz 0.2s 1.1s ease forwards;
  -o-animation: logo-from-horz 0.2s 1.1s ease forwards;
  animation: logo-from-horz 0.2s 1.1s ease forwards;
  -webkit-transform: translateX(1000px);
  -ms-transform: translateX(1000px);
  -o-transform: translateX(1000px);
  transform: translateX(1000px);
}

h1 span:nth-of-type(11) {
  -webkit-animation: logo-from-horz 0.2s 1.1s ease forwards;
  -o-animation: logo-from-horz 0.2s 1.1s ease forwards;
  animation: logo-from-horz 0.2s 1.1s ease forwards;
  -webkit-transform: translateX(1000px);
  -ms-transform: translateX(1000px);
  -o-transform: translateX(1000px);
  transform: translateX(1000px);
}

@-webkit-keyframes logo-from-horz {
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}

@-o-keyframes logo-from-horz {
  100% {
    -o-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes logo-from-horz {
  100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}

@-webkit-keyframes logo-from-vert {
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}

@-o-keyframes logo-from-vert {
  100% {
    -o-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes logo-from-vert {
  100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}

.contributors {
  background: #222;
  color: #eee;
}

.contributors header {
  border-bottom-color: #666;
}

.contributors .readme {
  display: none;
}

.effeckt-demo-captions + .contributors .readme {
  display: block;
}

.contributors ol {
  margin-left: 35px;
}

.contributors hr {
  margin: 15px 0;
}

.fluid-video {
  height: 0;
  padding-top: 62.5%;
  position: relative;
}

.fluid-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.button-demo-wrap {
  width: 35%;
  float: left;
}

.button-demo-wrap:nth-child(2n) {
  clear: both;
}

@media (max-width: 500px) {
  .button-demo-wrap {
    width: 100%;
    float: none;
  }
}

.effeckt-list-wrap {
  width: 50%;
  float: left;
  margin: 0 0 2rem 0;
}

.effeckt-list-wrap:nth-child(even) {
  clear: both;
}

.effeckt-demo-list-scroll > ul {
  width: 32%;
  float: left;
  margin-right: 2%;
  margin-bottom: 2%;
}

.effeckt-demo-list-scroll > ul:nth-of-type(3n) {
  margin-right: 0;
}

@media (max-width: 500px) {
  .effeckt-demo-list-scroll > ul {
    width: 100%;
    float: none;
    height: 250px;
    margin: 0 0 1rem 0;
  }
}

.effeckt-toggle-demo {
  min-height: 220px;
}

[data-toggle-trigger] {
  margin-bottom: 20px;
}

.effeckt-modal {
  background: white;
}

.effeckt-modal h3 {
  padding: 1rem;
  color: white;
  background: #444;
}

.effeckt-modal-content {
  padding: 1rem;
}

.effeckt-overlay {
  z-index: 1000;
  background: rgba(0, 0, 0, 0.5);
}

.effeckt-button {
  background: #444;
  color: white;
  border: 0;
  padding: 0.8rem 1rem;
  font-size: 1.3em;
  margin: 0 0.25rem 0.6rem 0;
  white-space: nowrap;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.effeckt-page-transition {
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;
  overflow: hidden;
  background: #555;
}

.effeckt-page-transition-content {
  position: relative;
  top: 50%;
  left: 50%;
  width: 200px;
  margin: -100px 0 0 -100px;
  color: white;
}

.effeckt-off-screen-nav {
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  bottom: 0;
  overflow-y: auto;
  background: #333;
  visibility: hidden;
  width: 12rem;
}

.effeckt-off-screen-nav a {
  color: inherit;
}

.effeckt-off-screen-nav-close {
  position: absolute;
  right: .5rem;
  top: 0;
  font-size: 150%;
}

.effeckt-off-screen-nav-close:hover,
.effeckt-off-screen-nav-close:focus {
  color: red;
}

.effeckt-off-screen-nav-rotate.effeckt-off-screen-nav-show ~ .page-wrap .off-screen-nav-cover {
  background: -webkit-linear-gradient(left, rgba(238, 238, 238, 0), rgba(238, 238, 238, 0.9));
  background: -o-linear-gradient(left, rgba(238, 238, 238, 0), rgba(238, 238, 238, 0.9));
  background: linear-gradient(left, rgba(238, 238, 238, 0), rgba(238, 238, 238, 0.9));
}

.effeckt-caption {
  width: 48%;
  margin: 0 4% 1rem 0;
}

.effeckt-caption:nth-child(2n) {
  margin-right: 0;
}

.effeckt-caption img {
  width: 100%;
  display: block;
}

.effeckt-caption figcaption {
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 1rem;
}

.effeckt-caption figcaption h3 {
  font-size: 1.2rem;
}

.effeckt-caption figcaption p {
  margin: 0;
}

.effeckt-list-scroll {
  height: 480px;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  overflow-y: scroll;
  list-style: none;
}

.effeckt-list-scroll > li {
  padding: 0.5rem;
  background: #eee;
  color: #252525;
  font-size: 18px;
}

.effeckt-list-scroll > li:nth-child(odd) {
  background: #e6e6e6;
}