画像をボタンにするCSS作成

写真やイラストをボタンとして使用することは難しくありません。簡単なCSSを指定するだけで、マウスを乗せた時に「濃くする」「薄くする」「大きくする」「回転する」「角丸にする」など見栄えの良いボタンとなります。

当ページでは、簡単な操作で写真・イラストをボタンにする方法を確認できます。

色々なマウスオーバーの動きがありますのでお試しください。

<img src="sample.png" class="button" onclick="goClick()" width="150" height="217" alt="サンプルボタン">

<style type="text/css">
.button {
  display      : inline-block;
  border-radius: 50%;                  /* 角丸 */
  box-shadow   : 6px 6px 3px #666666;  /* 影の設定 */
  cursor       : pointer;              /* カーソル形状 */
  transition   : .3s;                  /* なめらか変化 */
}
.button:hover {
  box-shadow   : none;                 /* 影の設定 */
  border-radius: 0;                    /* 角丸 */
}
</style>

<script>
function goClick() {
  // クリック時の動作を指定できます
  location.href = "http://www.cman.jp/";
}
</script>