GORAGOD.com

freelance, web developer, web designer, hosting, domain name

ปุ่มสวยด้วย CSS

ปุ่มกดสวยๆ ก็สร้างด้วย CSS ได้ครับ

<style type="text/css">
#button1 {
  color:red; /* สีของตัวอักษร */
  border:1px solid navy; /* กรอบของปุ่ม */
  background-color:white; /* สีพื้นของปุ่ม */
  font:8pt Tahoma; /* แบบอักษร */
  padding:3px; /* ช่องว่างระหว่างกรอบกับตัวอักษร */
}
</style>
<input type="button" id="button1" value="แบบที่ 1." />

<style type="text/css">
#button2 {
  color:red; /* สีของตัวอักษร */
  border:1px solid navy; /* กรอบของปุ่ม */
  background-color:white; /* สีพื้นของปุ่ม */
  font:8pt Tahoma; /* แบบอักษร */
  padding:3px; /* ช่องว่างระหว่างกรอบกับตัวอักษร */
  background:url(home.gif); /* มีรูปด้วย */
  background-position:center;
  background-repeat:no-repeat;
}
</style>
<input type="button" id="button2" value="แบบที่ 2." />

<style type="text/css">
#button3 {
  color:red; /* สีของตัวอักษร */
  border:1px solid #666666; /* กรอบของปุ่ม */
  background-color:white; /* สีพื้นของปุ่ม */
  font:8pt Tahoma; /* แบบอักษร */
  padding:3px; /* ช่องว่างระหว่างกรอบกับตัวอักษร */
  background:url(background.gif); /* มีรูปเป็นพื้น */
}
</style>

<input type="button" id="button3" value="แบบที่ 3." />

ตัวอย่าง
0SHAREFacebookLINE it!
^