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

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

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

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

画像をボタンにしよう!

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

マウスオーバー時の動き
影の設定
長さ
ぼかし
角丸
影の色
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
他▶
透明度
サンプルボタン
使用したhtml
<img src="sample.png" class="button" onclick="goClick()" width="150" height="217" alt="サンプルボタン">
生成したCSS
<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>
サンプルJavaScript
<script>
function goClick() {
  // クリック時の動作を指定できます
  location.href = "http://www.cman.jp/";
}
</script>
広告
広告
ページTOP

注意事項

CSSの「animation」を使用しています。「animation」は、古いブラウザいや一部ブラウザでは動作しません。

「animation」の使い方は以下を参照ください。
animation 「アニメーション」

ページTOP
広告

生成できるホームページ・パーツ一覧
ご利用時の注意事項・制約事項
よくあるご質問
何で無料なの?
生成コードに利用制限はある?
生成コードに保証はある?
jQueryで生成できない?

広告
ページTOP
広告
QrCode
このページのURL
スマートフォン・タブレット
運営:株式会社シーマン