html
<a href="#" class="btn bgleft"><span>7-1-1 背景が流れる（左から右）</span></a>css
/*== ボタン共通設定 */
.btn {
/*アニメーションの起点とするためrelativeを指定*/
position: relative;
overflow: hidden;
/* ボーダーの形状 */
text-decoration: none;
display: inline-block;
border: 1px solid #555;
/* ボーダーの色と太さ */
padding: 10px 30px;
text-align: center;
outline: none;
/*アニメーションの指定*/
transition: ease .2s;
}
/*ボタン内spanの形状*/
.btn span {
position: relative;
z-index: 3; /*z-indexの数値をあげて文字を背景よりも手前に表示*/
color: #333;
}
.btn:hover span {
color: #fff;
}
/*== 背景が流れる（左から右） */
.bgleft:before {
content: '';
/*絶対配置で位置を指定*/
position: absolute;
top: 0;
left: 0;
z-index: 2;
/*色や形状*/
background: #333;/*背景色*/
width: 100%;
height: 100%;
/*アニメーション*/
transition: transform .6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
transform: scale(0, 1);
transform-origin: right top;
transform-origin: left top; /*右から左の場合はleftにする*/
}
/*hoverした際の形状*/
.bgleft:hover:before {
transform-origin: left top;
transform: scale(1, 1);
}
/*========= レイアウトのためのCSS ===============*/
body {
vertical-align: middle;
padding: 100px 0;
text-align: center;
}
p {
margin: 0 0 10px 0;
}
html
<button class="btn cap" data-tippy-content="<div class='inner-cap'>
<p>続きは会員登録をしたら読むことができます。</p>
<p>ツールチップにはHTMLも使えます。</p></div>">
ボタン
</button>
CSS
/*========= レイアウトのためのCSS ===============*/
.btn {
display:block;
outline: none;
background:#333;
color: #fff;
border-radius: 10px;
padding: 10px 50px;
margin: 0 auto;
}
.btn:hover {
background: #056AA9;
}
span {
background: linear-gradient(transparent 60%, #ffff66 60%);
cursor: pointer;
}
a {
color:#333;
}
a:hover {
text-decoration: none;
}
JS
tippy('.cap', {
//指定した要素にツールチップが出現
placement: 'top-start',
//ツールチップの表示位置⇒top、top-start、top-end、right、right-start、right-end、bottom、bottom-start、bottom-end、left、left-start、left-end。指定をしなくてもtopに表示
animation: 'shift-toward-subtle',
//ツールチップ出現の動き。動きを指定するにはhttps://unpkg.com/browse/tippy.js@5.0.3/animations/から任意の動きを選び<head>内に読み込むことが必要。使用できる動き⇒shift-away、shift-away-subtle、shift-away-extreme、shift-toward、shift-toward-subtle、shift-toward-extreme、scale、scale-subtle、scale-extreme、perspective、perspective-subtle、perspective-extreme。指定をしなくてもfadeで表示
theme: 'light-border',
//ツールチップのテーマの色。色を指定するにはhttps://unpkg.com/browse/tippy.js@5.0.3/themes/からテーマを選び<head>内に読み込んで指定する。テーマの種類⇒light、light-border、material、translucent。指定をしなくても黒色で表示
duration: 200,
//ツールチップの出現の速さをミリ秒単位で指定
}
)