おしゃれなワンポイント丸ボタン
記事内におしゃれな、かわいらしさのイメージでしょうか
丸ボタンを配置してみては、いかがでしょう
今回の丸ボタンは、画像を加工するのではなく、CSSでマークアップしますので、
色とサイズを指定すするだけなので作業手間は大幅に省けます
作動スタイルは、画像上にマウスを置くとわずかにずれ、へこみで動くように
なっていますが、リンクは付けていないので単なるちょこ動き
では、ご案内に進みます
以下のコードは、丸画像を配置したい記事内に張り付けてください
コード
<a class="button"><span class="maru"></span></a>
<center>
で、囲むと記事中央にも配置可能です
</center>
コード
<center>
<a class="button"><span class="maru"></span></a>
</center>
上記は、単なるずれのみですが、こちらはマウスを置くとサイト上部まで自動スクロール
します
コード
<a class="button" href="#"><span class="maru"></span></a>
TOPの文字は、コードの上に記載しているだけです
次はスタイルシートを開いてください
以下、作動用CSS記述を、スタイルートのわかりやすい箇所に張り付けてください
.button {
position: relative;
display: block;
width: 50px;
height: 50px;
border: 1px solid #ccc;
border-radius: 100px;
background: #04DDFD;
}
.button .maru {
background: rgba(181, 244, 253, 0.8);
position: absolute;
z-index:-1;
border-radius: 100px;
height: 70px;
width: 70px;
top: -10px; /*A.中心*/
left: -10px; /*A.中心*/
}
.button:hover .maru {
animation: pulsate 1s ease-out; /* スピードなど */
animation-iteration-count: infinite;
}
@keyframes pulsate {
0% { transform: scale(1, 1); }
50% { opacity: 1; }
100% { transform: scale(4, 4); opacity: 0.0; }
}
ここまで
数値変更で大きさを変えられます
カラー変更は、以下行のカラーコードを書き換え
background: #04DDFD;