Untitled

dabblet.css

body{
	background:url("http://dabblet.com/img/noise.png") repeat scroll 0 0%, -moz-linear-gradient(left center , #ECE7E3 1px, transparent 1px) no-repeat scroll 2.8em 0 #F4F1EF;
}

.point{
	display: inline-block;
	background: #23A8EF;
	width: 150px;
	height: 100px;
	border-radius: 8px;
	margin: 100px 0px 0 40px;
	box-shadow:0 1px 0 #E8FEFF,inset 0 2px 1px  rgba(0,0,0,0.2);
	position: relative;
	color: white;
	font: normal 18px/90px verdana;
	text-align: center;
	-moz-transition: background 0.2s linear;
}
.point:hover{
-moz-animation: delete 0.4s infinite 1.3s;
box-shadow:inset 0 1px 1px rgba(0,0,0,0.2), 0 1px 8px  rgba(0,0,0,0.3);
background: #26B4FF;
}
.delete{
opacity: 0;-moz-transition: all 0.1s linear 1.3s;
position: absolute;
display: inline-block;
right: 5px;
top: 5px;
font: bold 36px/11px 'Entypo';
color: #eee;
text-shadow: 0 0.5px 0 #FF1C1C;
text-decoration: none;
background: #FF1C1C;
border-radius: 50px;
height: 20px;
width: 20px;
text-align: center;
box-shadow: 0 1px 0 #FFCBCB;
text-shadow: 0 1px 0 #666;
}
.point:hover .delete{opacity: 1;}

@-moz-keyframes delete {
	0%{-moz-transform: rotate(0deg)}
	33%{  -moz-transform: rotate(-3deg)}
	66%{-moz-transform: rotate(3deg) scale(1.01) }
	99.99%{-moz-transform: rotate(0deg)}
}

dabblet.html

<div class='point'>～だけあって<a class='delete' href='#'>X</a></div>
<div class='point'>～だけあって<a class='delete' href='#'>X</a></div>
<div class='point'>～だけあって<a class='delete' href='#'>X</a></div>
<div class='point'>～だけあって<a class='delete' href='#'>X</a></div>

settings.json

{"view":"split","seethrough":"","prefixfree":"1","page":"html"}