クリックしたら波紋が広がる | 動くWebデザインアイディア帳

ボタン
-クリックしたら波紋が広がる-

デモページを見る

See the Pen 7-1-11 クリックしたら波紋が広がる by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen.

「Result」内の要素をクリックして動きを確かめてね！

動きを実現する仕組み

CSS の円形グラデーションを、ボタンがクリックされたら拡大して波紋をつくる。

HTMLの書き方

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

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

body内のボタンを表示させたい場所に以下のHTMLを記載します。
```
<a href="#" class="btnripple">7-1-11 クリックしたら波紋が広がる</a>
```

自作のCSS内の書き方

/* クリックしたら波紋が広がる */

.btnripple{
    /*波紋の基点とするためrelativeを指定*/
	position: relative;
    /*はみ出す波紋を隠す*/
	overflow: hidden;
    /*ボタンの形状*/
    text-decoration: none;
	display:inline-block;
	background: #333;
	color: #fff;
	padding: 10px 20px;
	border-radius: 25px;
    outline: none;
}

.btnripple::after {
    content: "";
    /*絶対配置で波紋位置を決める*/
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    /*波紋の形状*/
    background: radial-gradient(circle, #fff 10%, transparent 10%) no-repeat 50%;
    transform: scale(10, 10);
    /*はじめは透過0に*/
    opacity: 0;
    /*アニメーションの設定*/
    transition: transform 0.3s, opacity 1s;
}

/*クリックされたあとの形状の設定*/
    .btnripple:active::after {
    transform: scale(0, 0);
    transition: 0s;
    opacity: 0.3;
}