JSFiddle - React, Tailwind, and code Playground

by terby

HTML

<p> <i>Soft Button by <a href="" title="Follow me on Twitter">@SaraSoueidan </a></i></p>  
<div class="box"> <span></span> </div>

CSS

html,body{
  height:100%;
}
body{
  margin:20px;
  background: #ECE8DF;
  background: url(http://subtlepatterns.com/patterns/extra_clean_paper.png) repeat;
  border: 1px dashed #9B999A;
  border-radius:5px;
	font-family: "serif";
}

.box{
  width:100px;
  height:100px;
  border-top:2px solid #fff;
  border-radius:50%;
  margin:10px auto 50px;
  background-color:#EEEEEE;
  background: linear-gradient(#EDEAE1,#CDC8B5);
  text-align:center;
  box-shadow:
    0 5px 2px 3px rgba(158, 158, 158, 0.4), 
    0 3px 5px #B7B6B6, 
    0 0 0 2px #BBB7AE, 
    inset 0 -3px 1px 2px rgba(186, 178, 165, 0.5),
    inset 0 3px 1px 2px rgba(246, 245, 241, 0.3);
  cursor:pointer;
  position:relative;
}
.box:active{
  width:100px;
  height:100px;
	border-radius:50%;
  border-top:none;
  border:2px solid #BAB7AE;
	background-color:#EEEEEE;
	text-align:center;
	position:relative;
	color:#BAB7AE;
	font-size:64px;
	line-height:100px;
	text-shadow:
    0 1px 1px white,
    0 1px 1px #BAB7AE;
  
  box-shadow:  0 0 0 0 #BBB7AE;
}
.box:before{
	content:" ";
	display:block;
	position:absolute;
	z-index:-90;
	width:135px;
	height:135px;
	border-radius:50%;
	border-top:2px solid #CCC8BF;
  border-bottom: 1px solid #F4F3F1;
  box-shadow: inset 0 -2px 0 2px #F7F6F2, inset 0 2px 1px 1px #CCC8BF;
	left:-17.5px; 
	top:-20px;
	background:-moz-linear-gradient(#DAD6CB,#F1EDEA);
	box-shadow: inset 1px 0 1px 0px #D9D9D9; 
}
p, p a{
  text-shadow: 1px 1px 1px white;
  color:#7E7E7E;
  text-align:center;
  font-size:18px;
  line-height:2;
  text-decoration:none;
  margin-bottom:30px;
}
.box span{
  display:inline-block;
  box-shadow: 
    inset 0 1px 1px 1px #7E7E7E, 
    0 1px 1px white;
  height:15px; 
  width:15px;
  border-radius:50%;
  background: linear-gradient(#AEADAA,#BAB7AE);
  margin:42px auto;
}