JSFiddle - React, Tailwind, and code Playground

by terby

HTML

<div class='buttons'>
      <a href='#' title='Title 1'>
        &#x2606;
      </a>
      <a class='active' href='#' title='Title 2'>
        &#x262F;
      </a>
      <a href='#' title='Title 3'>
        &#x2666;
      </a>
      <a href='#' title='Title 4'>
        &#x267A;
      </a>
    </div>


<p>In this iteration, these buttons only use unicode symbols. You could also use text or icon fonts. Please see my <a href="http://dribbble.com/shots/743236-CSS-Buttons-Widget">Dribbble shot</a> or <a href="http://trinkaus.cc/labs/buttons.html">[email protected]</a> for more examples. The next step would be to make them as cross-browser compatible as possible. If you have questions, feel free to ask on Twitter: <a href="http://twitter.com/saschamt">@saschamt</a>. Kind regards, Sascha Michael Trinkaus.</p>

CSS

.buttons {
  position: relative;
  white-space: nowrap;
  min-height: 33px;
  margin-bottom: 30px;
	top: 100px;
	margin-left: 50px }
  .buttons a {
    -webkit-animation: bounceInDown 900ms 200ms ease-in-out both;
    -moz-animation: bounceInDown 900ms 200ms ease-in-out both;
    -ms-animation: bounceInDown 900ms 200ms ease-in-out both;
    -o-animation: bounceInDown 900ms 200ms ease-in-out both;
    animation: bounceInDown 900ms 200ms ease-in-out both;
    width: 50px;
    height: 33px;
    position: absolute;
    top: 0;
		text-decoration: none;
    padding-top: 9px;
    outline-width: 0px;
    z-index: 990;
    color: #a675b3;
    text-align: center;
    line-height: 26px;
    display: block; }
    .buttons a:not(.active) {
      -webkit-box-shadow: inset 0 1px 1px rgba(111, 55, 125, 0.8), inset 0 -1px 0px rgba(63, 59, 113, 0.2), 0 9px 16px 0 rgba(0, 0, 0, 0.3), 0 4px 3px 0 rgba(0, 0, 0, 0.3), 0 0 0 1px #150a1e;
      -moz-box-shadow: inset 0 1px 1px rgba(111, 55, 125, 0.8), inset 0 -1px 0px rgba(63, 59, 113, 0.2), 0 9px 16px 0 rgba(0, 0, 0, 0.3), 0 4px 3px 0 rgba(0, 0, 0, 0.3), 0 0 0 1px #150a1e;
      box-shadow: inset 0 1px 1px rgba(111, 55, 125, 0.8), inset 0 -1px 0px rgba(63, 59, 113, 0.2), 0 9px 16px 0 rgba(0, 0, 0, 0.3), 0 4px 3px 0 rgba(0, 0, 0, 0.3), 0 0 0 1px #150a1e;
      background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #3b2751), color-stop(100%, #271739));
      background-image: -webkit-linear-gradient(#3b2751, #271739);
      background-image: -moz-linear-gradient(#3b2751, #271739);
      background-image: -o-linear-gradient(#3b2751, #271739);
      background-image: linear-gradient(#3b2751, #271739);
      text-shadow: 0 0 21px rgba(223, 206, 228, 0.5), 0 -1px 0 #311d47; }
      .buttons a:not(.active):hover, .buttons a:not(.active):focus {
        -webkit-transition: color 200ms linear;
        -moz-transition: color 200ms linear;
        -o-transition: color 200ms linear;
        transition: color 200ms linear;
    ...