JSFiddle - React, Tailwind, and code Playground

HTML

<div class="button round transparent enter glossy icon" data-icon="★"></div>

CSS

.enter {
    position: absolute;
    width: 36px;
    height: 24px;
    cursor: pointer;
    text-align: center;
}



/* BonBon Buttons 1.1 by simurai.com

1.1 Added unprefixed attributes, :focus style, <button> support
1.0 Released

Usage:
	
	Default button: 			<a href="" class="button">Label</a>
	More fancy with icon: 		<a href="" class="button orange glossy" data-icon="★">Label</a>
	
Following additional class names are supported:
		
	Color: 		orange, pink, blue, green, transparent
	Font: 		serif
	Material: 	glossy, glass
	Size: 		xs, xl
	Shape: 		round, oval, brackets, skew, back, knife, shield, drop, morph
	Icon only: 	icon
	Disabled:	disabled

*/


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


/* -------------- THE button -------------- */
.button {

/* text */
	text-decoration: 		none;
	font: 					24px/1em 'Droid Sans', sans-serif;
	font-weight: 			bold;
	text-shadow: 			rgba(255,255,255,.5) 0 1px 0;
	-webkit-user-select: 	none;
	-moz-user-select: 		none;
	user-select: 			none;
	
	
/* layout */
	padding: 				.5em .6em .4em .6em;
	margin: 				.5em;
	display: 				inline-block;
	position: 				relative;
	
	-webkit-border-radius: 	8px;
	-moz-border-radius: 	8px;
	border-radius: 	8px;
	
/* effects */
	border-top: 		1px solid rgba(255,255,255,0.8);
	border-bottom: 		1px solid rgba(0,0,0,0.1);
	
	background-image: 	-webkit-gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0.7) )), url(noise.png);
	background-image: 	-moz-radial-gradient(top, ellipse cover, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 100%), url(noise.png);
	background-image: 	gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0.7) )), url(noise.png);

	-webkit-transition: background .2s ease-in-out;
	-moz-transition: 	background .2s ease-in-out;
	transition: 		background .2s ease-in-out;
	
/* color */
	color: 				hsl(0, 0%, 40%)...

JavaScript

//bind to the `keydown` event when the `document` is focused
$(document).on('keydown', function (event) {

    //if enter is pressed
    if (event.keyCode == 13) {

        //add the `.button-clicked` class to any element with the `.button` class
        $('.button').addClass('button-clicked');
    }
}).on('keyup', function (event) {
    if (event.keyCode == 13) {

        $('.button').removeClass('button-clicked');
    }
});