JSFiddle - React, Tailwind, and code Playground

Iconic Buttons

by Jennifer Perrin

HTML

<div class="gridcontainer clearfix">
	<div class="grid_3">
		<div class="fmcircle_out">
			<a href="#web">
				<div class="fmcircle_border">
					<div class="fmcircle_in fmcircle_blue">
						<span>Web-Design</span><img src="https://dl.dropbox.com/u/65958930/uploads/cssdeck/design.png" alt="" />
					</div>
				</div>
			</a>
		</div>
	</div>

	<div class="grid_3">
		<div class="fmcircle_out">
			<a href="#branding">
				<div class="fmcircle_border">
					<div class="fmcircle_in fmcircle_green">
						<span>Branding</span><img src="https://dl.dropbox.com/u/65958930/uploads/cssdeck/logo.png" alt="" />
					</div>
				</div>
			</a>
		</div>
	</div>

	<div class="grid_3">
		<div class="fmcircle_out">
			<a href="#software">
				<div class="fmcircle_border">
					<div class="fmcircle_in fmcircle_red">
						<span>Integration</span><img src="https://dl.dropbox.com/u/65958930/uploads/cssdeck/develop.png" alt="" />
					</div>
				</div>
			</a>
		</div>
	</div>
</div>

CSS

body {
	font-size: 13px;
	line-height: 20px;
	background: url('https://dl.dropbox.com/u/65958930/OLR/dust.png') center center;
	text-align: enter;
}
/* -- Circular Work -- */
.gridcontainer {
	width: 720px;
	margin: 30px auto;
}

.grid_3 {
  display: inline;
  float: left;
  margin-left: 10px;
  margin-right: 10px;
  width: 220px;
}

.grid_9 {
  display: inline;
  float: left;
  margin-left: 10px;
  margin-right: 10px;
  width: 700px;
}

.fmcircle_out {
	width: 200px;
	height: 200px;
	background: rgba(221,221,221,0.3) url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAO0lEQVQYV2NkIAIwElKze/fu/3gVgRS4uroyEjQJZBNWRTATYE7BUISuAKdJ6J6Bm4TNBBTr8CkAKQQA02QXOj4w/E8AAAAASUVORK5CYII=);
	text-align: center;
	display: block;
	margin-left: 10px;
	opacity: 0.5;	
	
	border-radius: 100px;
	-moz-border-radius: 100px;
	-webkit-border-radius: 100px;
	-o-border-radius: 100px;
	
	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	-ms-transition: all 0.2s linear;
	transition: all 0.2s linear;
}

	.fmcircle_out:hover {
		opacity: 1;	
		
		-webkit-transition: all 0.2s linear;
		-moz-transition: all 0.2s linear;
		-o-transition: all 0.2s linear;
		-ms-transition: all 0.2s linear;
		transition: all 0.2s linear;
	}
	
	.fmcircle_out:hover .fmcircle_in img {
		margin: 30px 25px 25px 25px;
		width: 120px;
		height: 120px;
		
		-webkit-transition: all 0.2s linear;
		-moz-transition: all 0.2s linear;
		-o-transition: all 0.2s linear;
		-ms-transition: all 0.2s linear;
		transition: all 0.2s linear;
	}
	


.fmcircle_in {
	width: 170px;
	height: 170px;
	margin: 15px;
	display: inline-block;
	overflow: hidden;
	
	border-radius: 85px;
	-moz-border-radius: 85px;
	-webkit-border-radius: 85px;
	-o-border-radius: 85px;
}

.fmcircle_in img {
	border: none;
	margin: 53px;
	width: 64px;
	height: 64px;
		
	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	-ms-transition:...