ใน Discord เว็บแอ๊ปเมื่อมีการคลิก&ถือเป็น navbar(เซิร์ฟเวอร์)ปุ่ม,มันเคลื่อนไปนิดหน่อยลงที่แสดงในนี้ GIF: https://imgur.com/a/bC25LtO
ยังไงฉันก็จะประสบความสำเร็จในส่วนนี้ลูกเล่นใน CSS หรือบางที CSS&JS?
ใน Discord เว็บแอ๊ปเมื่อมีการคลิก&ถือเป็น navbar(เซิร์ฟเวอร์)ปุ่ม,มันเคลื่อนไปนิดหน่อยลงที่แสดงในนี้ GIF: https://imgur.com/a/bC25LtO
ยังไงฉันก็จะประสบความสำเร็จในส่วนนี้ลูกเล่นใน CSS หรือบางที CSS&JS?
คุณสามารถใช้ชั่วโมง :active
และตำแหน่ง absolute
.btn {
position: relative;
top: 0px;
font-family: "Open Sans";
text-decoration: none;
font-size: 25px;
padding: 15px 50px;
margin: 0 10px;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0px 5px 0px #ccc;
transition: all 250ms ease;
}
.btn:active {
position: relative;
top: 5px;
box-shadow: none !important;
transition: all 250ms ease;
}
<button class="btn">press me</button>
หรือใช้ :active
กับ translateY()