JSFiddle - React, Tailwind, and code Playground

by Christian Rouhault

HTML

<div style="text-align: center;">
    <butto>	<a class="a-btn" href="#"><span class="a-btn-symbol ">i</span> <span class="a-btn-text">Télécharger</span> <span class="a-btn-slide-text">Grey Océan</span><span class="a-btn-slide-icon">.</span> </a></butto>
    <input type="text" readonly="true"/>
	</div>

CSS

@font-face {

    font-family: 'WebSymbolsRegular';

    src: url('../font/WebSymbols-Regular.eot');

    src: url('../font/WebSymbols-Regular.eot?#iefix') format('embedded-opentype'),

        url('../font/WebSymbols-Regular.woff') format('woff'),

        url('../font/WebSymbols-Regular.ttf') format('truetype'),

        url('../font/WebSymbols-Regular.svg#WebSymbolsRegular') format('svg');

    font-weight: normal;

    font-style: normal;

}


/*===============STYLE BOUTONS =====================*/

.bouton .label, .bouton .badge {

	position: relative;

	top: -1px; }



.bouton-mini .label, .bouton-mini .badge { top: 0; }



.bouton {

	display: inline-block;

	text-decoration: none;

	padding: 4px 12px;

	margin-bottom: 0;

	font-size: 14px;

	line-height: 20px;

	text-align: center;

	vertical-align: middle;

	cursor: pointer;

	color: #333333;

	text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);

	background-color: #f5f5f5;

	background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);

    -pie-background: linear-gradient (top, #ffffff, #e6e6e6);

	background-repeat: repeat-x;

	behavior:url(../../PIE.php);

	border-color: #e6e6e6 #e6e6e6 #bfbfbf;

	border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);

	border: 1px solid #cccccc;

	border-bottom-color: #b3b3b3;

	border-radius: 4px;

	box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05); }



	.bouton:hover, .bouton:focus,  .bouton.disabled, .bouton[disabled] {

		color: #333333;

		background-color: #e6e6e6;

        -pie-background: linear-gradient(top, #e6e6e6, #ffffff);

        behavior:url(../../PIE.php);

		}



	 



	.bouton:hover, .bouton:focus {

		color: #333333;

		text-decoration: none;

		background-position: 0 -15px;

		transition: background-position 0.1s linear; 		}



.bouton:focus {

		outline: thin dotted #333;

		outline: 5px auto -webkit-focus-ring-color;

		outline-offset: -2px; 		}



.bouton.disabled, .bouton[disabled] {

		cursor:...

JavaScript

$(function() {
  
  $('html').css('zoom','200%');
  
  var c = 0;
  $('bouton').click(function() {
    c++;
    $(':input').val(c);
  });
});