จำเป็นต้องสร้างปุ่มที่มีเอฟเฟกต์เมื่อวางเมาส์ไว้กับ Elementor ?
ถ้าใช่ นั่งบนรถบัสที่สวยงามคันนี้ เพราะสิ่งที่เราจะทำได้ในวันนี้อยู่ในวิดีโอต่อไปนี้:
มาสร้างเพจแล้วแก้ไขด้วย Elementorจากนั้นเลือกโครงสร้างแบบ 2 คอลัมน์ ในแผงให้แก้ไขส่วนที่สร้างขึ้นใหม่โดยเลือก ความสูงขั้นต่ำ บนสนาม การวางฟอร์ม และทันที ความสูงขั้นต่ำ คลิกเลย VH แล้วตั้งเคอร์เซอร์ไปที่ 100.
ในแท็บ สไตล์ เปลี่ยนสีพื้นหลังเป็น # 070e39
ในคอลัมน์แรก ให้วางวิดเจ็ตปุ่ม แก้ไขข้อความโดยพิมพ์ ดูรายละเอียด แล้วมาจัดชิดขวากัน
ในแท็บ สไตล์ มาปรับเปลี่ยนกันเถอะ วิชาการพิมพ์ โดยการเปลี่ยนขนาดบน 15, การแปลง sur ตัวพิมพ์ใหญ่ et ระยะห่างตัวอักษร sur 1.1
ในแท็บ สูง, แก้ไขทั้งหมด อัตรากำไรขั้นต้น sur 20 และในส่วน CSS ที่กำหนดเองมาวางโค้ดต่อไปนี้เพื่อเพิ่มการไล่ระดับสีให้กับปุ่ม:
ตัวเลือก {
–Btn-ความกว้าง: 180px;
–Btn-ความสูง: 50px;
–Btn-พื้นหลัง: # 0e1538;
– ไล่ระดับสีซ้าย: # F803F8;
–การไล่ระดับสีขวา: # 03F2FD;
}
ตัวเลือก a {
ตำแหน่ง: ญาติ;
ความกว้าง: var (–btn-width);
ความสูง: var (–btn-height);
}
ตัวเลือก a: ก่อน
ตัวเลือก a: หลังจาก {
มีความสุข: ";
ตำแหน่ง: สัมบูรณ์
สิ่งที่ใส่เข้าไป: 0;
การเปลี่ยนแปลง: 0.5 วินาที;
}
ตัวเลือก a: nth-child (1): ก่อน,
ตัวเลือก a: nth-child (1): หลังจาก {
พื้นหลัง: การไล่ระดับสีเชิงเส้น (45deg, var (–left-gradient), var (–btn-background), var (–btn-background), var (–right-gradient));
}
ตัวเลือก a: เลื่อน: ก่อน {
สิ่งที่ใส่เข้าไป: -3px;
}
ตัวเลือก a: เลื่อน: หลังจาก {
สิ่งที่ใส่เข้าไป: -3px;
ตัวกรอง: เบลอ (10px);
}
เลือกช่วง {
ตำแหน่ง: สัมบูรณ์
ด้านบน: 0;
ซ้าย: 0;
ความกว้าง: 100%;
ความสูง: 100%;
พื้นหลัง: var (–btn-background);
ดัชนี z: 10;
แสดงผล: ดิ้น;
ปรับเนื้อหา: ศูนย์;
จัดเรียงรายการ: กึ่งกลาง;
ล้น: ซ่อนอยู่;
}
ตอนนี้ หากคุณวางเมาส์เหนือปุ่ม คุณจะค้นพบเอฟเฟกต์ที่สวยงาม
หากต้องการเพิ่มเอฟเฟกต์กระจกแวววาวบนปุ่ม ให้วางโค้ดต่อไปนี้ด้วย:
/ * เอฟเฟกต์กระจกเงา * /
เลือกช่วง :: ก่อน {
มีความสุข: ";
ตำแหน่ง: สัมบูรณ์
ด้านบน: 0;
ซ้าย: -50%;
ความกว้าง: 100%;
ความสูง: 100%;
พื้นหลัง: rgba (255,255,255,0.075);
แปลง: เอียง (160deg);
}
คุณสังเกตเห็นเอฟเฟกต์ใหม่ที่ทำให้ปุ่มสว่างขึ้น
อ่าน: วิธีสร้างส่วนสมาชิกในทีมด้วย Elementor
ตอนนี้ ให้คัดลอกปุ่มนี้แล้ววางลงในคอลัมน์ที่สอง มาเปลี่ยนการจัดตำแหน่งปุ่มไปทางซ้ายและเปลี่ยนข้อความเป็น ดูเพิ่มเติม.
ตอนนี้คุณต้อง ประกาศ งานของคุณหรือดูตัวอย่าง
นี่คือ 2 ปุ่มที่สวยงามที่สร้างขึ้น
รับ Elementor Pro ทันที!
สรุป
ดังนั้น ! บทช่วยสอนนี้แสดงวิธีสร้างปุ่มพร้อมเอฟเฟกต์โฮเวอร์ด้วยปุ่ม . เท่านั้นสำหรับบทช่วยสอนนี้ สร้างหน้า Elementor. หากคุณมีข้อกังวลใด ๆ เกี่ยวกับวิธีการเดินทางไปที่นั่น แจ้งให้เราทราบภายใน ความเห็น.
อย่างไรก็ตามคุณสามารถปรึกษาได้ ทรัพยากรของเราหากคุณต้องการองค์ประกอบเพิ่มเติมเพื่อดำเนินโครงการสร้างเว็บไซต์อินเทอร์เน็ตของคุณโดยปรึกษากับเราใน การสร้างบล็อก WordPress หรือที่อยู่บน Divi: ธีม WordPress ที่ดีที่สุดตลอดกาล.
แต่ในขณะเดียวกัน แบ่งปันบทความนี้ในเครือข่ายโซเชียลต่าง ๆ ของคุณ.
...
