キラーン

タイプマイクロインタラクション系 ボタン・リンク系 類似の音

目次

オノマトペ

hoverしてね

キラーンボタン

ソースコード

あくまでも一例なので参考程度に使ってください。

キラーンHTML

<div class="sample">
<a href="#">キラーンボタン</a>
</div>

ぽよぽよCSS

/*　今回はhoverバージョンを作成 */
.sample {
	margin: 0 auto 30px;
	position: relative;
	width:300px;
	overflow: hidden;
}
.sample::before {
	content: '';
	width:40px;
	height: 100px;
	transform: rotate(30deg);
	background-image:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0.2) 47%,rgba(255,255,255,0) 96%,rgba(255,255,255,0) 100%);
	position: absolute;
	left: -20%;
	top: -20px;
	transition: .5s all;
}
.sample:hover::before {
	content: '';
	position: absolute;
	left: 130%;
	top: -20px;
	opacity: 0;
}
.sample a {
	padding: 1em;
	border-radius: 8px;
	display: block;
	width: 200px;
	text-align: center;
	background-color: #203394;
	color: #FFF;
	font-size: 115%;
}

使い方

  • このボタン、オンマウスの時「キラーン」と光らせたいんだけど！
  • 何秒かおきに「キラーン」と光らせることはできますか？