文字の画像(イメージ)化
cman.jp cman.jp > パーツ作成メニュー > ボタンのデザイン > [a]アンカーをボタンにする

<a>アンカー(リンク)をボタンにする

htmlの「a」(アンカー/リンク)のタグの見た目は簡単に変更することが出来ます。
当ページでは、簡単操作で「a」(アンカー/リンク)をボタンにデザインできます。

普通の<a>アンカー CSSで変更すると
移動する 移動する

<a>アンカー(リンク)をボタンに変更して見よう!

色々試してみて、生成されたCSSをコピーしてご利用ください。

ボタン形状/角丸
Top
Top
Top
Top
文字サイズ
ボタン内の余白
横余白
縦余白
マウスオーバー時動作
ボタンの影付け
長さ
ぼかし
文字色
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
他▶
透明度
ボタン色
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
他▶
透明度
生成したhtml
<a href="https://www.cman.jp" class="button">移動する</a>
生成したCSS
<style type="text/css">
#topScroll {
  display       : inline-block;
  position      : fixed;       /* ボタン固定 */
  bottom        : 20px;        /* 下から位置 */
  right         : 20px;        /* 右から位置 */
  padding       : 25px 25px;   /* 余白       */
  background    : #00007f;     /* 背景色     */
  color         : #ffffff;     /* 文字色     */
  opacity       : 0.5;         /* 透明度     */
  border-radius : 50%;         /* 角丸       */
  font-size     : 20pt;        /* 文字サイズ */
  font-weight   : bold;        /* 太字       */
  line-height   : 1.2em;       /* 行の高さ   */
  letter-spacing: 2px;         /* 文字間隔   */
  text-align    : center;      /* 文字位置   */
  cursor        : pointer;     /* カーソル   */
  z-index       : 999;         /* 重ね順位   */
}
#topScroll:hover {
  opacity       : 0.9;   /* カーソル時透明度 */
}
</style>
広告
広告
ページTOP

注意事項

フォントは使用するページ(html)により変わります。

ページTOP
広告
生成できるホームページ・パーツ一覧
ご利用時の注意事項・制約事項
よくあるご質問
何で無料なの?
生成コードに利用制限はある?
生成コードに保証はある?
jQueryで生成できない?
ページTOP
広告
QrCode
このページのURL
スマートフォン・タブレット
運営:株式会社シーマン