ทำเอฟเฟค ตอนกดปุ่ม


CSS Knowledge เป็น บอร์ดรวามความรู้ CCC เน้นบทความ แนวทางการเขียนโปรแกรม บันทึกกันลืม เพื่อให้สมาชิกได้เขียนความรู้ที่ตัวเองมีให้สมาชิกท่านอื่นๆ ได้ เข้ามาอ่าน และ ไว้อ่านเองกันลืมด้วย

Moderators: mindphp, ผู้ดูแลกระดาน

User avatar
bankjittapol
PHP Super Member
PHP Super Member
Posts: 344
Joined: 21/10/2019 10:19 am

ทำเอฟเฟค ตอนกดปุ่ม

Post by bankjittapol » 14/11/2019 8:11 pm

การใส่ css ให้ปุ่มกด เพื่อเพิ่ม เอฟเฟคให้ปุ่มกด ซึ่งจะประกอบด้วยคำสั่ง css ดังนี้
padding คือการเพิ่มช่องว่าง โดย ค่า รูปแบบการใช้คำสั่ง padding : (px,px,px,px); ซึ่งกำหนด px ตัวแรกคือ กำหนดค่า ซ้าย บน ล่าง ขวา ตามลำดับ
font-size กำหนดขนาดของข้อความ
text-align : center คือการกำหนดตำแหน่งให้ข้อความว่าอยู่ตำแหน่งไหน จากตัวอย่างกำหนดให้อยู่กึ่งกลาง(center)
cursor : pointer คือ การกำหนดให้ว่าเมื่อนำเมาส์ไปวางไว้ที่ปุ่มกด ตัวเมาส์จะเปลี่ยนเป็นรูปนิ้วมือชี้
outline:none คือ การนำ เส้นกรอบเมื่อทำการกดปุ่ม ออก
color: #fff; คือการกำหนดสีให้กับข้อความ
background-color: #4CAF50; ใส่สีพื้นหลังให้กับปุ่ม
border: none; คือกำหนดกรอบให้กับปุ่มกด
border-radius: 15px; คือการกำหนดขอบของปุ่มกดให้โค้ง
box-shadow: 0 9px #999; กำหนดเงาให้แก่ปุ่มกด และสีของเงา

Code: Select all

<style>
.button {
  padding: 15px 25px;
  font-size: 24px;
  text-align: center;
  cursor: pointer;
  outline: none;
  color: #fff;
  background-color: #4CAF50;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #999;
}

</style>
.button:hover {background-color: #3e8e41} คือ เมื่อนำเมาส์ไปวางที่ปุ่มกด ตัวปุ่มจะเปลี่ยนสีพื้นหลัง
.button:active {} คือ เมื่อกดปุ่ม
transform: translateY(4px); เมื่อกดปุ่ม ปุ่มจะยุบ

Code: Select all

.button:hover {background-color: #3e8e41}

.button:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

Code: Select all

<button class="button">กดปุ่ม</button>
การทำงาน คือ เมื่อเอาเมาส์ไปชี้ที่ปุ่ม สีปุ่มจะเปลี่ยนเป็นสีเขียนเข้ม และเมื่อกดปุ่ม สีปุ่มจะเปลี่ยนเป็นสีแดงทันที
ก่อนกดปุ่ม
Image

เมื่อเอาเมาส์ไปวาง
Image

เมื่อกดปุ่ม
Image

Return to “CSS Knowledge”

Users browsing this forum: No registered users and 2 guests