ตัวอย่างปุ่มพร้อมโรลโอเวอร์ 1 ใน CSS

โรลโอเวอร์ 1 CSS
สำหรับตัวอย่างนี้เราต้องมี 3 รูปที่จะทำงานเป็น
พักผ่อน

บน

ค้างไว้

จากนั้นในเนื้อหาของเว็บไซต์ของเราเรามีสิ่งนี้
รหัส:


จุดเริ่มต้น

ดังนั้นสำหรับปุ่มทั้งหมดของเรา หลังจากที่เราจะต้องใช้ CSS แล้ว เราจะเริ่มด้วยโค้ดนี้:
รหัส:

# บอท1 {
เส้นขอบ: 0 0 0 0;
ช่องว่างภายใน: 0;
จัดข้อความ: ศูนย์;
}
ที่เราบอกว่าเราไม่ต้องการระยะขอบด้านนอกและด้านใน เราจัดข้อความให้อยู่ตรงกลาง ตอนนี้เราดำเนินการต่อด้วยรหัสนี้:
รหัส:

# bot1 ถึง {
ภาพพื้นหลัง: url (bg_menu_1.jpg);
พื้นหลังตำแหน่ง: ศูนย์ด้านบน;
ความสูง: 30px;
ความกว้าง: 100px;
แสดง: บล็อก;
สี: # 990000;
ตกแต่งข้อความ: ไม่มี;
ช่องว่างภายในด้านบน: 5px;
พื้นหลังซ้ำ: ไม่ซ้ำ;
font-weight: ตัวหนา;
}
ว่าเขาคือคนที่ทำทุกอย่างจริงๆ มาดูกันทีละบรรทัด
ภาพพื้นหลัง: url (bg_menu_1.jpg);
ด้วยสิ่งนี้เราบอกว่าเราต้องการภาพพื้นหลังและเราให้เส้นทางนี้
พื้นหลังตำแหน่ง: ศูนย์ด้านบน;
ด้วยเหตุนี้ เราจึงระบุว่าตำแหน่งของภาพพื้นหลังจะอยู่ที่กึ่งกลางและขึ้นด้านบน
พื้นหลังซ้ำ: ไม่ซ้ำ;
เพื่อไม่ให้พื้นหลังเกิดซ้ำเหมือนเป็นลวดลาย
ความสูง: 30px;
ความกว้าง: 100;
เราบอกคุณว่าความสูงจะเป็น 30 และความกว้าง 100px ซึ่งเป็นขนาดของภาพพื้นหลังของเรา

แสดง: บล็อก;
เพื่อให้มันสร้างและเคารพกล่องที่มีมาตรการที่เราวางไว้ก่อนหน้านี้
สี: # 990000
ด้วยเหตุนี้เราจึงให้สีเฉพาะกับข้อความที่อยู่ในกล่องของเราเท่านั้น
ตกแต่งข้อความ: ไม่มี;
เป็นการหลีกเลี่ยงบรรทัดที่อยู่ด้านล่างลิงก์
ช่องว่างภายในด้านบน: 5px;
เพื่อที่ฉันจะได้ประหยัดพื้นที่ 5px ที่ส่วนบนของลิงค์ของเรา และด้วยวิธีนี้ มันจึงลดตำแหน่งลงตรงกลางกล่องของเรา
font-weight: ตัวหนา;
ทำให้ตัวอักษรเป็นตัวหนา
จากนั้นคุณเพียงแค่ต้องเพิ่มคลาสสำหรับองค์ประกอบหลอก "โฮเวอร์" และ "โฟกัส"
รหัส:

# bot1 a: โฮเวอร์ {
ภาพพื้นหลัง: url (bg_menu_2.jpg);
}
# bot1 ถึง: โฟกัส {
ภาพพื้นหลัง: url (bg_menu_3.jpg);
}
แต่ในขณะที่เราตระหนัก เราเพียงแต่เปลี่ยนเส้นทางของภาพพื้นหลังเพื่อให้ได้เอฟเฟกต์ที่เราต้องการ
รหัสของเรา ตัวอย่างโรลโอเวอร์ใน css แสดงด้านล่าง:
รหัส:








จุดเริ่มต้น


และสามารถดาวน์โหลดรูปภาพได้จากหน้านี้ โดยคลิกขวาที่รูปภาพแล้วบันทึกเป็น