gouf/circle_link.html

## circle_link.html
<!DOCTYPE HTML>
<html lang="ja-JP">
<head>
  <meta charset="UTF-8">
	<title></title>
	<style type="text/css">
	  #wrap {
  	  border: 2px solid silver;
	  }
  	.ring {
  	  border: thin solid black;
  	  width: 150px;
  	  height: 150px;
    	border-radius: 150px;
    	display: inline-block;
    	margin: auto 5px;
  	}
  	.ring > a {
  	  display: block;
    	margin: auto;
    	height: auto;
    	width: inherit;
    	/* line-height: 9em; */
    	line-height: 110pt;
    	text-align: center;
    	text-decoration: none;
    	color: inherit;
  	}
  	.ring > a:hover {
  	  border-radius: inherit;
  	  width: inherit;
  	  height: inherit;
    	background: inherit;
  	}
  	.green {
    	 border: thin solid green;
    	 background: rgba(50, 240, 0, 0.5);
  	}
  	.red {
    	border: thin solid red;
    	background: rgba(240, 50, 0, 0.5);
  	}
	</style>
</head>
<body>
  <div id="wrap">
  	<div class="ring green"><a href="http://www.google.co.jp/">eample.com</a></div>foo
  	<div class="ring red"><a href="http://www.google.co.jp/">foo.example.com</a></div>bar
  </div>
</body>
</html>
	<!DOCTYPE HTML>
	<html lang="ja-JP">
	<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
	#wrap {
	border: 2px solid silver;
	}
	.ring {
	border: thin solid black;
	width: 150px;
	height: 150px;
	border-radius: 150px;
	display: inline-block;
	margin: auto 5px;
	}
	.ring > a {
	display: block;
	margin: auto;
	height: auto;
	width: inherit;
	/* line-height: 9em; */
	line-height: 110pt;
	text-align: center;
	text-decoration: none;
	color: inherit;
	}
	.ring > a:hover {
	border-radius: inherit;
	width: inherit;
	height: inherit;
	background: inherit;
	}
	.green {
	border: thin solid green;
	background: rgba(50, 240, 0, 0.5);
	}
	.red {
	border: thin solid red;
	background: rgba(240, 50, 0, 0.5);
	}
	</style>
	</head>
	<body>
	<div id="wrap">
	<div class="ring green"><a href="http://www.google.co.jp/">eample.com</a></div>foo
	<div class="ring red"><a href="http://www.google.co.jp/">foo.example.com</a></div>bar
	</div>
	</body>
	</html>