TOP

おしゃれなワンポイント丸ボタン

記事内におしゃれな、かわいらしさのイメージでしょうか
丸ボタンを配置してみては、いかがでしょう

 

今回の丸ボタンは、画像を加工するのではなく、CSSでマークアップしますので、
色とサイズを指定すするだけなので作業手間は大幅に省けます

 

作動スタイルは、画像上にマウスを置くとわずかにずれ、へこみで動くように
なっていますが、リンクは付けていないので単なるちょこ動き

 

 

 

では、ご案内に進みます

 

以下のコードは、丸画像を配置したい記事内に張り付けてください

 

見本です 左端配置

 

コード
<a class="button"><span class="maru"></span></a>

 

 

 

<center>
で、囲むと記事中央にも配置可能です
</center>

 



 

コード
<center>
<a class="button"><span class="maru"></span></a>
</center>

 

 

 

上記は、単なるずれのみですが、こちらはマウスを置くとサイト上部まで自動スクロール
します

 

TOP

 

コード
<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;

 

 

記事スペースにCSSでおしゃれな丸ボタンを取り付ける
トップページ