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

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

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

<a href="https://www.cman.jp" class="button">移動する</a>

<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>