押し込まれる（円が縮小） | 動くWebデザインアイディア帳

ボタン
-押し込まれる（円が縮小）-

デモページを見る

See the Pen 7-1-14 押し込まれる（円が縮小） by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen.

「Result」内のボタンにカーソルをあわせて動きを確かめてね！

動きを実現する仕組み

CSS のscale を使い、hover をしたら疑似要素で描かれた円が縮小するアニメーションを使い、押し込みを表現する。

HTMLの書き方

head終了タグ直前に自作のCSSを読み込みます。

<link rel="stylesheet" type="text/css" href="css/7-1-14.css">
</head>

body内のボタンを表示させたい場所に以下のHTMLを記載します。
```
<a href="#" class="pushcircle">7-1-14</a>
```

自作のCSS内の書き方

/*== 押し込む円 */

.pushcircle{
    /*周囲の線の起点とするためrelativeを指定*/
	position: relative;
    /*円の形状*/
	width:100px;
	height:100px;
    box-sizing: border-box;
    padding: 0 10px;
	text-align: center;
	background:#333;
	border-radius:50%;
	color: #fff;
    text-decoration: none;
    outline: none;
    /*天地中央にテキストを配置*/
    display: flex;
    align-items: center;
    justify-content: center;
}

/*内側の線*/
.pushcircle:after {
	content: "";
    /*絶対配置で線の位置を決める*/
	position: absolute;
	top: 50%;
	left: 50%;
    /*線の形状*/
    width: 85%;
	height: 85%;
	border: 2px solid #333;
	border-radius: 50%;
	transform: translate(-50%, -50%) scale(1.1);
    /*アニメーションの指定*/
    transition: .3s ease; 
	}

/*hoverをしたら枠線が小さくなる*/
.pushcircle:hover:after {
	transform: translate(-50%, -50%) scale(1);
    border-color:#fff;
}