divタグのボタンにcssでワンポイント＋おまけ

# はじめに
こないだ、[divタグのボタンにcssで動きをつける](http://qiita.com/tnakagawa/items/d8a047f7f544679f87ef)を作成していた時に、before又はafter擬似要素を使ってみて、これはボタンのワンポイントになるんではないかと思い実践してみました。

![divicon.png](https://qiita-image-store.s3.amazonaws.com/0/29914/3494f009-da1c-8652-0e63-1b1f6182f6f0.png)

#　ボタンのワンポイント
　ボタンに「◯　はい」「×　いいえ」みたいな「◯」と「×」をつけたい場合って、文字で書いたり、画像を入れたりして、対応していた記憶がありますが、擬似要素を使って実現していきます。

**基本**

```html:
<div class="xxx">XXX</div>
```
上記のように、「div」タグにclassを指定すると、ワンポイントが出るようになっています。

```css
		.xxx {
			position: relative;
			width: 100px;
			height: 50px;
			border: 3px solid #385D8A;
			background-color: #4F81BD;
			color: white;
			line-height: 50px;
			padding-left: 40px;
			border-radius: 20px;
			-moz-user-select: none;
			-webkit-user-select: none;
			-ms-user-select: none;
			cursor: pointer;
			overflow: hidden;
		}
```
ボタンは、上記のようにします。(xxxは、書く擬似要素の親要素名を設定してください。）
これに、beforeとafter擬似要素で作成した、ワンポイントを設置します。
ここで重要な点としては、擬似要素の場所を設定する為「position: relative;」を設定しているところです。

**四角**

```css
		.square::before {
			position: absolute;
			content: '';
			width: 20px;
			height: 20px;
			background-color: white;
			top: 15px;
			left: 10px;
		}
```

20x20の四角を置いてあるだけです。

**円**

```css
		.circle::before {
			position: absolute;
			content: '';
			width: 20px;
			height: 20px;
			background-color: white;
			border-radius: 50%;
			top: 15px;
			left: 10px;
		}
```

「border-radius」で角を丸めた、円を置いてあるだけです。

**輪**

```css
		.ring::before {
			position: absolute;
			content: '';
			width: 18px;
			height: 18px;
			border: 3px solid white;
			background-color: transparent;
			border-radius: 50%;
			top: 25%;
			left: 10px;
		}
```

「border-radius」で角を丸め、背景を透過にしボーダーつけたを円を置いてあるだけです。

**三角（上）**

```css
		.triangle1::before {
			position: absolute;
			content: '';
			width: 0;
			height: 0;
			border: 10px solid transparent;
			border-bottom: 17px solid white;
			top: 5px;
			left: 12px;
			overflow: hidden;
		}
```

サイズ0の四角に対し、ボーダーの下部分だけを表示すると、三角になります。
サイズを調整して置きます。

**三角（下）**

```css
		.triangle2::before {
			position: absolute;
			content: '';
			width: 0;
			height: 0;
			border: 10px solid transparent;
			border-top: 17px solid white;
			top: 17px;
			left: 12px;
		}
```

三角（上）に対して、ボーダーの上部分だけを表示すると、三角（上）になります。
サイズを調整して置きます。


**×（クロス）**

```css
		.cross::before {
			position: absolute;
			content: '';
			width: 3px;
			height: 28px;
			background-color: white;
			top: 11px;
			left: 21px;
			transform: rotateZ(45deg);
		}
		.cross::after {
			position: absolute;
			content: '';
			width: 3px;
			height: 28px;
			background-color: white;
			top: 11px;
			left: 21px;
			transform: rotateZ(-45deg);
		}
```

擬似要素を2つつかい、棒を45度傾け重ね合わせて置いてあります。

# おまけ

ここまでやったら、なんだか、オーディオアイコン出来るんじゃないかと思い、作ってみました。

# 全体

```html:divicon.html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Div Icon</title>
	</head>
	<style>
		* {
			font-family: Arial;
			font-size: 16px;
		}
		.square {
			position: relative;
			width: 100px;
			height: 50px;
			border: 3px solid #385D8A;
			background-color: #4F81BD;
			color: white;
			line-height: 50px;
			padding-left: 40px;
			border-radius: 20px;
			-moz-user-select: none;
			-webkit-user-select: none;
			-ms-user-select: none;
			cursor: pointer;
			overflow: hidden;
		}
		.square::before {
			position: absolute;
			content: '';
			width: 20px;
			height: 20px;
			background-color: white;
			top: 15px;
			left: 10px;
		}
		.circle {
			position: relative;
			width: 100px;
			height: 50px;
			border: 3px solid #385D8A;
			background-color: #4F81BD;
			color: white;
			line-height: 50px;
			padding-left: 40px;
			border-radius: 20px;
			-moz-user-select: none;
			-webkit-user-select: none;
			-ms-user-select: none;
			cursor: pointer;
			overflow: hidden;
		}
		.circle::before {
			position: absolute;
			content: '';
			width: 20px;
			height: 20px;
			background-color: white;
			border-radius: 50%;
			top: 15px;
			left: 10px;
		}
		.ring {
			position: relative;
			width: 100px;
			height: 50px;
			border: 3px solid #385D8A;
			background-color: #4F81BD;
			color: white;
			line-height: 50px;
			padding-left: 40px;
			border-radius: 20px;
			-moz-user-select: none;
			-webkit-user-select: none;
			-ms-user-select: none;
			cursor: pointer;
			overflow: hidden;
		}
		.ring::before {
			position: absolute;
			content: '';
			width: 18px;
			height: 18px;
			border: 3px solid white;
			background-color: transparent;
			border-radius: 50%;
			top: 25%;
			left: 10px;
		}
		.triangle1 {
			position: relative;
			width: 100px;
			height: 50px;
			border: 3px solid #385D8A;
			background-color: #4F81BD;
			color: white;
			line-height: 50px;
			padding-left: 40px;
			border-radius: 20px;
			-moz-user-select: none;
			-webkit-user-select: none;
			-ms-user-select: none;
			cursor: pointer;
			overflow: hidden;
		}
		.triangle1::before {
			position: absolute;
			content: '';
			width: 0;
			height: 0;
			border: 10px solid transparent;
			border-bottom: 17px solid white;
			top: 5px;
			left: 12px;
			overflow: hidden;
		}
		.triangle2 {
			position: relative;
			width: 100px;
			height: 50px;
			border: 3px solid #385D8A;
			background-color: #4F81BD;
			color: white;
			line-height: 50px;
			padding-left: 40px;
			border-radius: 20px;
			-moz-user-select: none;
			-webkit-user-select: none;
			-ms-user-select: none;
			cursor: pointer;
			overflow: hidden;
		}
		.triangle2::before {
			position: absolute;
			content: '';
			width: 0;
			height: 0;
			border: 10px solid transparent;
			border-top: 17px solid white;
			top: 17px;
			left: 12px;
		}
		.cross {
			position: relative;
			width: 100px;
			height: 50px;
			border: 3px solid #385D8A;
			background-color: #4F81BD;
			color: white;
			line-height: 50px;
			padding-left: 40px;
			border-radius: 20px;
			-moz-user-select: none;
			-webkit-user-select: none;
			-ms-user-select: none;
			cursor: pointer;
			overflow: hidden;
		}
		.cross::before {
			position: absolute;
			content: '';
			width: 3px;
			height: 28px;
			background-color: white;
			top: 11px;
			left: 21px;
			transform: rotateZ(45deg);
		}
		.cross::after {
			position: absolute;
			content: '';
			width: 3px;
			height: 28px;
			background-color: white;
			top: 11px;
			left: 21px;
			transform: rotateZ(-45deg);
		}
		.play {
			position: relative;
			width: 46px;
			height: 46px;
			border: 4px solid gray;
			background-color: darkgray;
			border-radius: 50%;
			-moz-user-select: none;
			-webkit-user-select: none;
			-ms-user-select: none;
			cursor: pointer;
			overflow: hidden;
		}
		.play::before {
			position: absolute;
			content: '';
			width: 0;
			height: 0;
			border: 12px solid transparent;
			border-left: 21px solid white;
			top: 12px;
			left: 15px;
		}
		.stop {
			position: relative;
			width: 46px;
			height: 46px;
			border: 4px solid gray;
			background-color: darkgray;
			border-radius: 50%;
			-moz-user-select: none;
			-webkit-user-select: none;
			-ms-user-select: none;
			cursor: pointer;
			overflow: hidden;
		}
		.stop::before {
			position: absolute;
			content: '';
			width: 20px;
			height: 20px;
			background-color: white;
			top: 13px;
			left: 13px;
		}
		.rec {
			position: relative;
			width: 46px;
			height: 46px;
			border: 4px solid gray;
			background-color: darkgray;
			border-radius: 50%;
			-moz-user-select: none;
			-webkit-user-select: none;
			-ms-user-select: none;
			cursor: pointer;
			overflow: hidden;
		}
		.rec::before {
			position: absolute;
			content: '';
			width: 20px;
			height: 20px;
			background-color: red;
			border-radius: 50%;
			top: 13px;
			left: 13px;
		}
		.pause {
			position: relative;
			width: 46px;
			height: 46px;
			border: 4px solid gray;
			background-color: darkgray;
			border-radius: 50%;
			-moz-user-select: none;
			-webkit-user-select: none;
			-ms-user-select: none;
			cursor: pointer;
			overflow: hidden;
		}
		.pause::before {
			position: absolute;
			content: '';
			background-color: white;
			width: 7px;
			height: 20px;
			top: 13px;
			left: 13px;
		}
		.pause::after {
			position: absolute;
			content: '';
			background-color: white;
			width: 7px;
			height: 20px;
			top: 13px;
			left: 26px;
		}
		.rew {
			position: relative;
			width: 46px;
			height: 46px;
			border: 4px solid gray;
			background-color: darkgray;
			border-radius: 50%;
			-moz-user-select: none;
			-webkit-user-select: none;
			-ms-user-select: none;
			cursor: pointer;
			overflow: hidden;
		}
		.rew::before {
			position: absolute;
			content: '';
			width: 0;
			height: 0;
			border: 12px solid transparent;
			border-right: 10px solid white;
			top: 12px;
			left: 10px;
		}
		.rew::after {
			position: absolute;
			content: '';
			width: 0;
			height: 0;
			border: 12px solid transparent;
			border-right: 10px solid white;
			top: 12px;
			left: 0px;
		}
		.ff {
			position: relative;
			width: 46px;
			height: 46px;
			border: 4px solid gray;
			background-color: darkgray;
			border-radius: 50%;
			-moz-user-select: none;
			-webkit-user-select: none;
			-ms-user-select: none;
			cursor: pointer;
			overflow: hidden;
		}
		.ff::before {
			position: absolute;
			content: '';
			width: 0;
			height: 0;
			border: 12px solid transparent;
			border-left: 10px solid white;
			top: 12px;
			left: 25px;
		}
		.ff::after {
			position: absolute;
			content: '';
			width: 0;
			height: 0;
			border: 12px solid transparent;
			border-left: 10px solid white;
			top: 12px;
			left: 15px;
		}
		.prev {
			position: relative;
			width: 46px;
			height: 46px;
			border: 4px solid gray;
			background-color: darkgray;
			border-radius: 50%;
			-moz-user-select: none;
			-webkit-user-select: none;
			-ms-user-select: none;
			cursor: pointer;
			overflow: hidden;
		}
		.prev::before {
			position: absolute;
			content: '';
			width: 0;
			height: 0;
			border: 12px solid transparent;
			border-right: 13px solid white;
			top: 12px;
			left: 8px;
		}
		.prev::after {
			position: absolute;
			content: '';
			background-color: white;
			width: 7px;
			height: 23px;
			top: 12px;
			left: 13px;
		}
		.next {
			position: relative;
			width: 46px;
			height: 46px;
			border: 4px solid gray;
			background-color: darkgray;
			border-radius: 50%;
			-moz-user-select: none;
			-webkit-user-select: none;
			-ms-user-select: none;
			cursor: pointer;
			overflow: hidden;
		}
		.next::before {
			position: absolute;
			content: '';
			background-color: white;
			width: 7px;
			height: 23px;
			top: 12px;
			left: 27px;
		}
		.next::after {
			position: absolute;
			content: '';
			width: 0;
			height: 0;
			border: 12px solid transparent;
			border-left: 13px solid white;
			top: 12px;
			left: 15px;
		}
	</style>
	<body>
		<div class="square">SQUARE</div>
		<br>
		<div class="circle">CIRCLE</div>
		<br>
		<div class="ring">RING</div>
		<br>
		<div class="triangle1">TRIANGLE1</div>
		<br>
		<div class="triangle2">TRIANGLE2</div>
		<br>
		<div class="cross">CROSS</div>
		<hr>
		<div class="play"></div>
		<br>
		<div class="stop"></div>
		<br>
		<div class="rec"></div>
		<br>
		<div class="pause"></div>
		<br>
		<div class="rew"></div>
		<br>
		<div class="ff"></div>
		<br>
		<div class="prev"></div>
		<br>
		<div class="next"></div>
	</body>
</html>
```