JSFiddle - React, Tailwind, and code Playground

by adamschwartz

HTML

<table><tr>
<td><button class="metal radial">♬</button></td>
<td><button class="metal radial">♬</button></td>
<td><button class="metal radial">♬</button></td>
<td><button class="metal radial">♬</button></td>
<td><button class="metal radial">♬</button></td>
<td><button class="metal radial">♬</button></td>
</tr></table>
<button class="metal linear">2</button>
<button class="metal linear">1</button>
<button class="metal linear">0</button>
<button class="metal linear oval">i</button>

CSS

/* Original concept by @simurai with changes by @adamschwartz */

/* globals */

@import url(http://fonts.googleapis.com/css?family=Droid+Sans:regular,bold);
@import url(prefixes.css);

html {
    font:62.5%/1 "Droid Sans", "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
    background-color: #f2f2f2;
    background-image:    -webkit-repeating-linear-gradient( 45deg, hsla(0,0%,0%,0) 0, hsla(0,0%,0%,.015) 5px),
                        -webkit-repeating-linear-gradient(-45deg, hsla(0,0%,0%,0) 0, hsla(0,0%,0%,.015) 5px);
}

body {
    margin: 100px;
    text-align: center;
}

table {
    margin: 0px auto;
}

td {
    padding: 20px;
}

button { border: none; display: block; cursor: pointer; }
a { text-decoration: none; display: block; }



/* Metal ------------------------- */

.metal {
    position: relative;
    margin: 40px auto;
    
    font: bold 6em/2em "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
    text-align: center;
    color: hsla(0,0%,20%,1);
    text-shadow: hsla(0,0%,40%,.5) 0 -1px 0, hsla(0,0%,100%,.6) 0 2px 1px;
    
    background-color: hsl(0,0%,90%);
    -webkit-box-shadow: 0.9px 23px 7px 0px rgba(0,0,0,0.3),0px 16px 4px 0px rgba(0,0,0,0.3), inset 0px 2px 10px rgba(255,255,255,1), 0px 0px 0px 1px #aaa, 0px 2px 0px 1px #999, 0px 3px 0px 1px #888, 0px 4px 0px 1px #777, 0px 5px 0px 1px #666, 0px 6px 0px 1px #555;
    
    -webkit-transition: color .2s;
}



/* Radial ------------------------- */

.radial.metal {
    width: 160px;
    height: 160px;
    line-height: 160px;
    border-radius: 80px;
    background-image:    -webkit-radial-gradient(  50%   0%,  8% 50%, hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%),
                        -webkit-radial-gradient(  50% 100%, 12% 50%, hsla(0,0%,100%,.6) 0%, hsla(0,0%,100%,0) 100%),
                        -webkit-radial-gradient(   0%  50%, 50%  7%, hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%),
                        -webkit-radial-gradient( 100%  50%, 50% ...

JavaScript

var chars = '☞❤❀✿★✪☀☯☂☁☃➹☣☢☠♨✈➸✓';

chars = chars.replace(/ /g, '');

$('.radial').click(function(){
    var l = chars.length, i = l, c, p = $(this), last = false;
    for (i; i--; ) {
        c = chars.charAt(parseInt(Math.random() * (l - 1), 10));
        if (i === 0) {
            c = Math.random() > 0.3 ? c : '♬';
            last = true;
        }
        last = false;
        (function(i, c, last){
            setTimeout(function(){
                console.log(last);
                p.text(c);
            }, (l - i) * 20);
        })(i, c);
    }
});