今日のサンプルです。ボタンを作成してみました。画像でボタンを作る方法の良い勉強になりました。
画像でボタンを作る方法は、たくさんありますが、現時点ではbackground属性でcssに書くのが一般的のようですね。
ボタンの動作は次のようにして指定できます。
・上にカーソルを置いている時 → :hover
・クリックしてる最中 → :active
・上にカーソルを置いている時 → cursor: pointer;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sample_HTML5</title>
<style>
.button {
height:29px;
width:72px;
background: url('google_submit01.png');
background-repeat: no-repeat;
}
.button:hover {
background: url('google_submit02.png');
background-repeat: no-repeat;
}
.button:active {
background: url('google_submit03.png');
background-repeat: no-repeat;
}
.cursor_sample {
height:29px;
width:72px;
cursor: pointer;
color: white;
background-color: blue;
border: 1px DarkBlue solid;
}
</style>
</head>
<body>
<form action="#" method="post">
<label>image_submit<br>
<input type="image" formmethod="post" src="google_submit01.png" alt="submit">
</label>
</form>
<label>image-button, :hover, :active<br>
<div class="button"></div>
</label>
<label>cursor_sample<br>
<div class="cursor_sample">送信</div>
</label>
</body>
</html>
