ปุ่มจัดแต่งทรงผมพร้อมตัวเลือกพื้นหลังใหม่ของ Divi (รวม 6 แบบ)

หากคุณไม่ได้ใช้ประโยชน์จากอินเทอร์เฟซตัวเลือกพื้นหลังใหม่ของ Divi ถือว่าคุณพลาด ความเป็นไปได้ในการออกแบบพื้นหลังนั้นน่าประหลาดใจ แต่จะดีหรือไม่ที่มีตัวเลือกการออกแบบที่ทรงพลังเหมือนกันสำหรับปุ่มของเรา ถ้าคำตอบคือใช่ ฉันคิดว่าคุณจะชอบโพสต์นี้

วันนี้ฉันจะแสดงวิธีนำคุณสมบัติการออกแบบพื้นหลังที่ทรงพลังแบบเดียวกันมาสู่ปุ่มสไตล์ เคล็ดลับการออกแบบนี้จัดเลเยอร์พื้นหลังของแถวและคอลัมน์ด้านหลังโมดูลปุ่มเพื่อให้คุณมีความสามารถในการออกแบบ 3 ชั้น ด้วยพลังเช่นนี้ สิ่งต่างๆ อาจเป็นอันตรายได้ ใจเย็นๆก่อนดีที่สุด

ไปกันเถอะ.

แอบมอง

นี่คือตัวอย่างการออกแบบปุ่มที่ครอบคลุมในโพสต์นี้

ปุ่มจัดแต่งทรงผมพร้อมตัวเลือกพื้นหลังใหม่ของ Divi (รวม 6 แบบ)

สมัครสมาชิกช่อง Youtube ของเรา

การตั้งค่า

ใช้ Visual Building เพิ่มส่วนปกติด้วยแถวคอลัมน์เดียว

ถัดไปเพิ่มโมดูลปุ่มในแถว

จากนั้นอัปเดตการ ตั้งค่าโมดูลปุ่ม ดังนี้:

ตัวเลือกเนื้อหา

ข้อความปุ่ม: [ป้อนข้อความ]
URL ของปุ่ม: [ป้อน URL]

ตัวเลือกการออกแบบ

การจัดตำแหน่งปุ่ม: Center
สีข้อความ: เบา
ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
ขนาดข้อความของปุ่ม: 48px

ตัวเลือกขั้นสูง

เราต้องการความกว้าง 100% จะต้องกรอกความกว้างของคอลัมน์ ในการดำเนินการนี้ ให้ป้อน CSS ที่กำหนดเองต่อไปนี้ในกล่ององค์ประกอบหลัก:

Width: 100%;

บันทึกการตั้งค่า

คุณไม่สามารถมองเห็นสิ่งใดบนหน้าได้ในขณะนี้ เนื่องจากขอบปุ่มและข้อความของคุณเป็นสีขาว แทนที่จะกำหนดสไตล์สีพื้นหลังของปุ่มโดยใช้การตั้งค่าโมดูลปุ่ม เราจะปรับแต่งสีพื้นหลังของแถว/คอลัมน์ด้านหลังปุ่มโดยใช้ตัวเลือกพื้นหลังขั้นสูง เราจะทบทวนการตั้งค่าโมดูลปุ่มเมื่อเราเริ่มออกแบบปุ่มที่เฉพาะเจาะจงมากขึ้น แต่สำหรับตอนนี้ มาตั้งค่าแถวให้เสร็จก่อน

ไปที่การ ตั้งค่าแถว ที่ปุ่มใหม่ของคุณนั่งอยู่และอัปเดตสิ่งต่อไปนี้:

ตัวเลือกเนื้อหา

เลือกแท็บการ ไล่ระดับสีพื้นหลัง ของ คอลัมน์ 1 แล้วคลิกปุ่มวงกลมสีเทาที่มีสัญลักษณ์บวกสีขาว

ตอนนี้คุณควรเห็นสีไล่ระดับสีเริ่มต้นปรากฏขึ้นด้านหลังปุ่มสีขาวของคุณ

ตอนนี้คอลัมน์พอดีพอดีด้านหลังปุ่มของเรา แต่เราจำเป็นต้องลดความกว้างของปุ่ม ในการทำเช่นนี้ เราจะใช้การตั้งค่าการปรับขนาดแถว ด้วยการตั้งค่าความกว้างที่กำหนดเองสำหรับแถวของเรา เราจะกำหนดความกว้างของปุ่มด้วย

ตัวเลือกการออกแบบ

ภายใต้ตัวเลือกการออกแบบ เราจะปรับขนาดของแถวให้พอดีกับปุ่มใหม่ของเราโดยปรับเปลี่ยนดังต่อไปนี้:

ใช้ความกว้างที่กำหนดเอง: ใช่
ความกว้างที่กำหนดเอง: 500px (ตั้งค่าความกว้างสูงสุดของปุ่มเป็น 500px)
ช่องว่างภายในที่กำหนดเอง: 0px บน, 0px ขวา, 0px ล่าง, 0px ซ้าย

ตัวเลือกขั้นสูง

เราต้องการการจับคู่รัศมีเส้นขอบของแถวและคอลัมน์กับสิ่งที่เรากำหนดไว้สำหรับปุ่มของเราเพื่อให้ตรงกันทั้งหมด ในการดำเนินการนี้ ให้ป้อน CSS ที่กำหนดเองต่อไปนี้ในกล่ององค์ประกอบหลัก:

border-radius: 10px;

ป้อน CSS เดียวกันลงในช่อง องค์ประกอบหลักของ คอลัมน์:

border-radius: 10px;

บันทึกการตั้งค่า

ขณะนี้การตั้งค่าแถวได้รับการอัปเดตให้มีความกว้างและช่องว่างภายในที่กำหนดเองแล้ว สองสิ่งได้สำเร็จแล้ว ขั้นแรก เราได้กำหนดความกว้างที่กำหนดเองสำหรับปุ่มของเราเรียบร้อยแล้ว ประการที่สอง ตอนนี้เรามีตัวเลือกพื้นหลังอีกชั้นหนึ่งที่เราสามารถใช้จัดรูปแบบปุ่มของเราได้

นั่นคือพื้นหลังทั้งหมด 3 เลเยอร์ (ปุ่ม คอลัมน์ แถว) ที่เราสามารถใช้สำหรับจัดแต่งทรงผมในภายหลัง

นี่คือภาพประกอบของวิธีการสร้างปุ่มในปัจจุบัน

สวยเย็นใช่มั้ย?

นั่นคือทั้งหมดสำหรับการตั้งค่าพื้นฐาน ถึงเวลาสนุกไปกับการสร้างการออกแบบที่ยอดเยี่ยมสำหรับปุ่มของคุณแล้ว

การสร้างการออกแบบปุ่มที่ยอดเยี่ยม

# 1 ปุ่มพื้นหลังวิดีโอ

ในการสร้างปุ่มนี้ คุณจะต้องใช้ทั้ง 3 เลเยอร์ พื้นหลังของแถวสำหรับวิดีโอ พื้นหลังของคอลัมน์สำหรับการไล่ระดับสี และพื้นหลังของปุ่มสำหรับโอเวอร์เลย์สีน้ำเงินเล็กน้อย

สำหรับการ ตั้งค่าแถวให้ อัปเดตตัวเลือก เนื้อหา ต่อไปนี้:

วิดีโอพื้นหลัง: [อัปโหลดวิดีโอ]
คอลัมน์ 1 พื้นหลังไล่ระดับสี: rgba(12,113,195,0.41), rgba(131,0,233,0.18)

บันทึกการตั้งค่า

สำหรับการ ตั้งค่าโมดูลปุ่ม ให้อัปเดตสิ่งต่อไปนี้:

ตัวเลือกเนื้อหา

ข้อความปุ่ม: “ลองดู”

ตัวเลือกการออกแบบ

ปุ่มสีพื้นหลัง: rgba(12,113,195,0.25)
สีเส้นขอบของปุ่ม: #0c71c3

บันทึกการตั้งค่า

ตอนนี้ปัญหาเดียวที่เราเหลือคือรัศมีเส้นขอบของพื้นหลังวิดีโอ เราต้องเพิ่ม CSS ที่กำหนดเองเพื่อให้วิดีโอมีรัศมีเส้นขอบที่ตรงกับปุ่ม รหัสพิเศษนี้จำเป็นสำหรับปุ่มพื้นหลังของวิดีโอเท่านั้น

หากต้องการเพิ่ม CSS ที่กำหนดเอง ให้ไปที่การตั้งค่าหน้าจาก Visual Builder แล้วคลิกแท็บขั้นสูง จากนั้นอัปเดตกล่องอินพุต CSS ที่กำหนดเองด้วย CSS ต่อไปนี้:

.et_pb_section_video_bg {

border-radius: 10px;

}

บันทึกการตั้งค่า

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

แค่นั้นแหละ! ตอนนี้คุณมีปุ่มที่มีพื้นหลังวิดีโอแล้ว

#2 ปุ่มตาหมากรุก

ปุ่มตาหมากรุกต้องใช้การไล่ระดับสีพื้นหลังสองชั้น (แถวและคอลัมน์)

ในการสร้างปุ่มนี้ คุณจะต้องใช้ 2 เลเยอร์ พื้นหลังของแถวสำหรับการไล่ระดับสีระดับแรก และพื้นหลังคอลัมน์สำหรับเลเยอร์สุดท้ายของการไล่ระดับสี

สำหรับการ ตั้งค่าแถวให้ อัปเดตตัวเลือก เนื้อหา ต่อไปนี้:

สีไล่ระดับพื้นหลัง: #8300e9, #0c71c3
ทิศทางการไล่ระดับสี: 270deg
ตำแหน่งเริ่มต้น: 50%
ตำแหน่งสุดท้าย: 0%
Column1 พื้นหลังไล่ระดับสี: rgba(224,11,0,0.39), rgba(255,255,255,0)
ทิศทางการไล่ระดับสี: 180deg
ตำแหน่งเริ่มต้น: 50%
ตำแหน่งสุดท้าย: 0%

บันทึกการตั้งค่า

ไปที่การ ตั้งค่าโมดูลปุ่ม และอัปเดตสิ่งต่อไปนี้

ตัวเลือกเนื้อหา

ข้อความปุ่ม: “สมัครสมาชิก”

ตัวเลือกการออกแบบ

ความกว้างของขอบปุ่ม: 0px
ระยะห่างระหว่างตัวอักษรของปุ่ม: 10px
แบบอักษรของปุ่ม: ค่าเริ่มต้น ตัวหนา (B) ตัวเอียง (I)
ปุ่มโฮเวอร์ตัวอักษรระยะห่าง: 10px

แค่นั้นแหละ. นี่คือผลลัพธ์สุดท้าย

ตอนนี้คุณรู้วิธีเพิ่มเอฟเฟกต์ตาหมากรุกให้กับปุ่มของคุณแล้ว

#3 ปุ่มไล่ระดับเรเดียล

ในการสร้างปุ่มนี้ คุณจะต้องใช้การไล่ระดับสีพื้นหลัง 2 เลเยอร์ (แถวและคอลัมน์)

สำหรับการ ตั้งค่าแถวให้ อัปเดตตัวเลือก เนื้อหา ต่อไปนี้:

สีไล่ระดับพื้นหลัง: #8300e9, #0c71c3
ประเภทการไล่ระดับสี: เรเดียล
ทิศทางเรเดียล: ศูนย์กลาง
ตำแหน่งเริ่มต้น: 50%
ตำแหน่งสุดท้าย: 100%
คอลัมน์ที่ 1 สีไล่ระดับสีพื้นหลัง: rgba(224,11,0,0.39), rgba(255,255,255,0)
ประเภทการไล่ระดับสี: เรเดียล
ทิศทางเรเดียล: ศูนย์กลาง
ตำแหน่งเริ่มต้น: 50%
ตำแหน่งสุดท้าย: 100%

บันทึกการตั้งค่า

ไปที่การ ตั้งค่าโมดูลปุ่ม และอัปเดตสิ่งต่อไปนี้:

ตัวเลือกเนื้อหา

ข้อความปุ่ม: “ติดต่อฉัน”

ตัวเลือกการออกแบบ

ความกว้างของขอบปุ่ม: 0px
แบบอักษรของปุ่ม: Crafty Girls

ไอคอนปุ่ม: [เลือกไอคอนรูปหัวใจ]
แสดงเฉพาะไอคอนบนโฮเวอร์สำหรับปุ่ม: NO

ตัวเลือกขั้นสูง

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

box-shadow: 0px 5px 10px 3px #ccc;

แค่นั้นแหละ! นี่คือผลลัพธ์สุดท้ายของคุณ:

#4 ปุ่มเป้า

ในการสร้างปุ่มนี้ คุณจะต้องใช้การไล่ระดับสีพื้นหลัง 2 เลเยอร์ (แถวและคอลัมน์) นอกจากนี้ เราจะเพิ่ม CSS ที่กำหนดเองลงในโมดูลปุ่มเพื่อสร้างเอฟเฟกต์ป๊อปอัปขอบด้านล่าง

สำหรับการ ตั้งค่าแถวให้ อัปเดตตัวเลือก เนื้อหา ต่อไปนี้:

สีไล่ระดับพื้นหลัง: #023500, #008c02
ประเภทการไล่ระดับสี: เรเดียล
ทิศทางเรเดียล: ศูนย์กลาง
ตำแหน่งเริ่มต้น: 19%
ตำแหน่งสุดท้าย: 0%
คอลัมน์ที่ 1 สีไล่ระดับสีพื้นหลัง: rgba(0,206,72,0.43), rgba(255,255,255,0)
ประเภทการไล่ระดับสี: เรเดียล
ทิศทางเรเดียล: ศูนย์กลาง
ตำแหน่งเริ่มต้น: 32%
ตำแหน่งสุดท้าย: 0%

ไปที่การ ตั้งค่าโมดูลปุ่ม และอัปเดตสิ่งต่อไปนี้:

ตัวเลือกเนื้อหา

ข้อความปุ่ม: “ซื้อ”

ตัวเลือกการออกแบบ

ขนาดข้อความของปุ่ม: 65px
ความกว้างของขอบปุ่ม: 0px
แบบอักษรของปุ่ม: Roboto, ตัวหนา (B), ตัวพิมพ์ใหญ่ (TT)

ตัวเลือกขั้นสูง

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

box-shadow: 0px 5px 0px 0px #01771f;

#5 ปุ่มรูปภาพ

ในการสร้างปุ่มนี้ คุณจะต้องใช้ทั้ง 3 เลเยอร์ ได้แก่ แถวสำหรับภาพพื้นหลัง คอลัมน์สำหรับพื้นหลังแบบไล่ระดับสี และพื้นหลังของปุ่มสำหรับโอเวอร์เลย์สีน้ำเงินกึ่งโปร่งใส

สำหรับการ ตั้งค่าแถวให้ อัปเดตตัวเลือก เนื้อหา ต่อไปนี้:

ใต้แท็บภาพพื้นหลัง

ภาพพื้นหลัง: [อัพโหลดรูปภาพ]
ขนาดภาพพื้นหลัง: ปก
ตำแหน่งภาพพื้นหลัง: Center
เล่นซ้ำภาพพื้นหลัง: ไม่เล่นซ้ำ
การผสมผสานภาพพื้นหลัง: ทวีคูณ

ใต้แท็บการไล่ระดับสีพื้นหลัง

สีไล่ระดับพื้นหลัง: rgba(12,113,195,0.33), #edf000
ประเภทการไล่ระดับสี: เชิงเส้น
ทิศทางการไล่ระดับสี: 63deg
ตำแหน่งเริ่มต้น: 50%
ตำแหน่งสุดท้าย: 100%

ตอนนี้เลื่อนลงไปที่ ตัวเลือกพื้นหลัง ของ คอลัมน์ 1 แล้วเลือกแท็บการไล่ระดับสี

คอลัมน์ 1 พื้นหลังไล่ระดับสี: rgba(236,239,31,0.66), rgba(0,0,0,0.49)
ประเภทการไล่ระดับสีของคอลัมน์: เชิงเส้น
ทิศทางการไล่ระดับของคอลัมน์: 139deg
ตำแหน่งเริ่มต้นของคอลัมน์: 12%
ตำแหน่งสิ้นสุดคอลัมน์: 0%

บันทึกการตั้งค่า

ที่ดูแลการออกแบบพื้นหลังระดับที่สองของเรา เหลืออีกหนึ่ง.

ไปที่การ ตั้งค่าโมดูลปุ่ม และอัปเดตสิ่งต่อไปนี้:

ตัวเลือกเนื้อหา

ข้อความปุ่ม: “รับตั๋ว”

ตัวเลือกการออกแบบ

ปุ่มสีพื้นหลัง: rgba(12,113,195,0.16)
สีเส้นขอบของปุ่ม: #efef4f
แบบอักษรของปุ่ม: Lato
ไอคอนปุ่ม: [เลือกไอคอนตั๋ว]
แสดงเฉพาะไอคอนเมื่อวางเมาส์เหนือปุ่ม: NO

วางปุ่ม สีข้อความ: #023b7c
วางปุ่ม สีพื้นหลัง: #023b7c

แค่นั้นแหละ!. ตรวจสอบปุ่มรูปภาพของคุณ

#6 ปุ่มแนวตั้ง

ในการสร้างปุ่มสุดท้ายนี้ เราจะใช้การออกแบบพื้นหลังเพียงชั้นเดียวเท่านั้น เราจะใช้การผสมผสานภาพของภาพพื้นหลังและสีพื้นหลังเพื่อสร้างรูปลักษณ์ที่ไม่เหมือนใคร

สำหรับ Row Settings ให้เลื่อนลงไปที่ Column 1 Background Options และอัปเดตสิ่งต่อไปนี้:

ภาพพื้นหลังของคอลัมน์: [อัปโหลดรูปภาพแนวตั้ง]
ขนาดภาพพื้นหลังของคอลัมน์: พอดี (เพื่อให้แน่ใจว่าภาพจะพอดีกับปุ่มเสมอ)
ตำแหน่งภาพพื้นหลังของคอลัมน์: กลางซ้าย (จัดแนวแนวตั้งของคุณทางด้านซ้ายของปุ่ม)
ทำซ้ำภาพพื้นหลังของคอลัมน์: ไม่มีการทำซ้ำ
การผสมผสานภาพพื้นหลังของคอลัมน์: ความส่องสว่าง (สิ่งนี้จะสร้างการผสมผสานที่ดีของสีส้มกับภาพบุคคล)

อย่าลืมลบสีการไล่ระดับสีปัจจุบันหากคุณตั้งค่าไว้ หากไม่เป็นเช่นนั้น คุณต้องการผสมผสานพื้นหลังสีส้ม เพียงคลิกที่แท็บการไล่ระดับสีแล้ววางเมาส์เหนือกล่องตัวเลือกสีแล้วคลิกไอคอนถังขยะที่ปรากฏขึ้นที่ด้านบนขวา

ตอนนี้คุณสามารถเห็นการผสมผสานสีส้มบนปุ่มของคุณ

บันทึกการตั้งค่า

ไปที่การ ตั้งค่าโมดูลปุ่ม และอัปเดตสิ่งต่อไปนี้:

ตัวเลือกเนื้อหา

ข้อความปุ่ม: “มาคุยกันเถอะ”

ตัวเลือกการออกแบบ

การจัดตำแหน่งปุ่ม: ขวา
สีเส้นขอบของปุ่ม: #ff7b23
ระยะห่างระหว่างตัวอักษรของปุ่ม: 3px
แบบอักษรของปุ่ม: Happy Monkey
ไอคอนปุ่ม [เพิ่มไอคอนแชท]
แสดงเฉพาะไอคอนเมื่อวางเมาส์เหนือปุ่ม: NO
ปุ่มโฮเวอร์ตัวอักษรระยะห่าง: 3px

ทุกอย่างเสร็จเรียบร้อย! ฉันชอบการออกแบบนี้สำหรับปุ่มติดต่อบล็อก ฉันคิดว่ามันเพิ่มสัมผัสส่วนตัวที่ดี

การออกแบบปุ่มบนโครงสร้างคอลัมน์ต่างๆ

จนถึงตอนนี้ เราใช้แถวคอลัมน์เดียวเพื่อใช้เป็นพื้นหลังของปุ่มของเรา ทำให้เราออกแบบพื้นหลังได้ 3 ชั้น อย่างไรก็ตาม หากคุณต้องการรวมปุ่มบนโครงสร้างคอลัมน์อื่น คุณสามารถทำได้ คุณจะสูญเสียแถวเป็นเลเยอร์พื้นหลัง

ตัวอย่างเช่น สมมติว่าคุณต้องการเพิ่มแถวคอลัมน์ 1/2 1/2 ที่มีปุ่มทางด้านซ้ายและข้อความบางส่วนทางด้านขวา นี่คือสิ่งที่คุณจะทำ

เริ่มต้นด้วย ส่วนปกติ ใหม่และเลือกโครงสร้าง แถวของคอลัมน์ 1/2 1/2 จากนั้นเพิ่ม โมดูลปุ่ม ในคอลัมน์ด้านซ้าย

ในการ ตั้งค่าโมดูลปุ่ม ตรวจสอบให้แน่ใจว่าคุณได้แทรก CSS ต่อไปนี้ในช่องป้อนข้อมูลองค์ประกอบหลักใต้แท็บขั้นสูง:

Width: 100%;

คุณสามารถปรับแต่งส่วนที่เหลือของโมดูลปุ่มได้ในภายหลัง

จากนั้นไปที่การ ตั้งค่าแถว และเลื่อนลงไปที่ ตัวเลือกพื้นหลังของคอลัมน์ 1 และอัปเดตการตั้งค่าพื้นหลังตามที่คุณต้องการ

จากนั้นไปที่แท็บ ออกแบบ และอัปเดตสิ่งต่อไปนี้:

คอลัมน์ที่ 1 Custom Padding: 0px บน, 0px ขวา, 0px ด้านล่าง, 0px Left

บันทึกการตั้งค่า

ตอนนี้คุณมีปุ่มบนคอลัมน์ด้านซ้ายที่สามารถใช้ตัวเลือกพื้นหลังของคอลัมน์ 1 สำหรับการออกแบบได้ เมื่อคุณย้อนกลับและอัปเดตรูปแบบปุ่มตามที่คุณต้องการแล้ว ให้เพิ่มข้อความของคุณในคอลัมน์ด้านขวา เท่านี้ก็เสร็จเรียบร้อย!

ตอบสนอง?

ใช่. เนื่องจากปุ่มต่างๆ ถูกสร้างขึ้นภายในโครงสร้างคอลัมน์ของ Divi ปุ่มจึงตอบสนองได้ดีในทุกอุปกรณ์ คุณอาจต้องทบทวนการตั้งค่าโมดูลปุ่มอีกครั้งเพื่อปรับวิธีที่องค์ประกอบปุ่มบางรายการปรับให้เข้ากับอุปกรณ์ต่างๆ

การสนับสนุนข้ามเบราว์เซอร์

ในปัจจุบัน Internet Explorer หรือ Edge ไม่สนับสนุนคุณสมบัติ CSS แบบผสมผสานโหมดพื้นหลัง และ Safari มีตัวเลือกการผสมที่จำกัด อย่างไรก็ตาม ประสบการณ์ของฉันกลับไม่มีทางเลือกมากนักสำหรับกรณีส่วนใหญ่

นี่คือลักษณะของปุ่มบน IE:

หากคุณมุ่งมั่นที่จะใช้ IE ฉันขอแนะนำให้ทดสอบพวกเขาเพื่อค้นหาสื่อที่มีความสุขซึ่งดูดีทั้งใน IE และเบราว์เซอร์อื่นๆ

ความคิดสุดท้าย

ฉันต้องยอมรับว่าบทช่วยสอนนี้ค่อนข้างแปลกใหม่สำหรับฉันเป็นการส่วนตัว ในอดีต ฉันต้องเพิ่มคลาสจำนวนมากและ CSS เพิ่มเติมให้กับธีมลูกของฉัน หากฉันต้องการจัดสไตล์ปุ่มอย่างสร้างสรรค์ แต่ตอนนี้ฉันสามารถใช้ตัวเลือกพื้นหลังของ Divi ได้แล้ว ชีวิตฉันก็ง่ายขึ้นมาก ฉันหวังว่าคุณสามารถใช้เคล็ดลับการออกแบบนี้เพื่อยกระดับปุ่มของคุณไปอีกระดับ

หวังว่าจะได้ยินจากคุณในความคิดเห็น

ไชโย