<style>
input.Button {
width: 120px;
padding: 10px;
cursor: pointer;
font-weight: bold;
font-size: 90%;
background: #339900;
color: #FFFFFF;
border: 1px solid #CCCCCC;
border-radius: 10px;
-moz-box-shadow:: 4px 4px 5px #CCCCCC;
-webkit-box-shadow:: 4px 4px 5px #CCCCCC;
box-shadow:: 4px 4px 5px #CCCCCC;
}
input.Button:hover {
color: #FFFFFF;
background: #006633;
border: 1px solid #FFFFFF;
-moz-box-shadow:: 4px 4px 5px #CCCCCC;
-webkit-box-shadow:: 4px 4px 5px #CCCCCC;
box-shadow:: 4px 4px 5px #CCCCCC;
} </style>
ปรับขนาดของปุ่ม Button ได้ที่ width:
ปรับการโค้งมนของมุมได้ที่ padding:
ปรับขนาดตัวอักษรของปุ่มได้ที่ font-size:
เปลี่ยนสีตัวอักษรได้ที่ color:
เปลี่ยนสีปุ่ม Button ได้ที่ background:
สำหรับส่วนอื่น ๆ ก็สามารถปรับเปลี่ยนได้ครับ ลองปรับแต่งดูครับ
2. ส่วนนี้จะเป็นขั้นตอนที่ 2 เพื่อนำโค้ดปุ่ม Button ไปแสดงผลในตำแหน่งที่เราต้องการภายในเว็บไซต์หรือเว็บบล็อกของเรา
2.1 โค้ดปุ่ม Button เมื่อคลิกที่ปุ่มหน้าเว็บใหม่จะถูกเปิดในหน้าต่างเดิม
<form>
<input class="Button" type="button" value="ใส่ข้อความที่นี่" onclick="window.location.href='ใส่ URL ลิงก์ที่นี่'" />
</form>
2.2 โค้ดปุ่ม Button เมื่อคลิกที่ปุ่มหน้าเว็บใหม่จะถูกเปิดในหน้าต่างใหม่
<form>
<input class="Button" type="button" value="ใส่ข้อความที่นี่" onclick="window.open('ใส่ URL ลิงก์ที่นี่')" />
</form>
*** ลองนำไปปรับแต่งใช้งานกันดูครับ ***
ไม่มีความคิดเห็น:
แสดงความคิดเห็น