HTML 角丸ボタン

2024-05-032024
33.8% (123.8/366)
May
9% (2.8/31)
Week 18
68.7% (4.8/7)
Day 03 Fri
81.4% (19.5/24)

訪問者

total: 11530
today: 5
yesterday: 4
now: 21

↑

更新

MenuBar

これはなに？
スクリーンショット
ソースコードとimg

これはなに？ †

HedgerWow? さんの Wii ボタン
- http://www.hedgerwow.com/360/dhtml/css-round-button/demo.php
を簡略化したトーンコントロールさんのWii風の角丸ボタン
- http://tonecontrol.mods.jp/memo/wii_button.html
の応用

権利関係をクリアにするために、ボタンのイメージ画像を keynote で作り直した

↑

スクリーンショット †

<p><a>に周りを透明色で囲ってあるボタン画像を貼り付けてボタンに見せる
マウスカーソルを合わせると、文字色が赤になり、ボタンの周囲が水色になる
- 背景全体を水色にすることにより、透明色の部分だけ色が変わったように見える
ボタンを押した後に枠線が残らないように
```
 overflow: hidden;
 outline: none;
```

↑

ソースコードとimg †

ボタンのイメージ画像
- button45.png
- button90.png
- button180.png

CSS

<html>
<head>
<title>Wii Button Example</title>
<style>
.ShortButton a{
  /* -- shape and color -- */
  display: block;
  background: White url(button45.png) center center no-repeat;
  width: 45px;
  padding: 7px 0px;
  
  /* -- border style -- */
  border: none;
  border-style:none;
  overflow: hidden;
  outline: none;
  
  /* -- text style -- */
  color: DarkBlue;
  font-size: 10px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  
  /* -- display same row -- */
  float: left;
}
.MiddleButton a{
  /* -- shape and color -- */
  display: block;
  background: White url(button90.png) center center no-repeat;
  width: 90px;
  padding: 7px 0px;
  
  /* -- border style -- */
  border: none;
  border-style:none;
  overflow: hidden;
  outline: none;
  
  /* -- text style -- */
  color: DarkBlue;
  font-size: 10px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  
  /* -- display same row -- */
  float: left;
}
.LargeButton a{
  /* -- shape and color -- */
  display: block;
  background: White url(button180.png) center center no-repeat;
  width: 180px;
  padding: 7px 0px;
  
  /* -- border style -- */
  border: none;
  border-style:none;
  overflow: hidden;
  outline: none;
  
  /* -- text style -- */
  color: DarkBlue;
  font-size: 10px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  
  /* -- display same row -- */
  float: left;
}
.ShortButton a:hover {
  color: red;
  background-color: lightBlue;
}
.MiddleButton a:hover {
  color: red;
  background-color: lightBlue;
}
.LargeButton a:hover {
  color: red;
  background-color: lightBlue;
}
</style>
</head>
<body>
  <p class="ShortButton"><a href="#">Button</a></p>
  <p class="MiddleButton"><a href="#">Button</a></p>
  <p class="LargeButton"><a href="#">Button</a></p>
  <br crear="all"/>
</body>
</head>

HTML

HTML 角丸ボタン

目次

訪問者

更新

最新の10件

人気の10件

MenuBar

これはなに？ †

スクリーンショット †

ソースコードとimg †