ตัวอย่างนี้ใช้เฉพาะตัวควบคุมของเครื่องมือสร้างเท่านั้น รูปภาพด้านบนแสดงสไตล์ชีตที่ดาวน์โหลดจริงซึ่งนำไปใช้กับปุ่ม HTML ทั่วไป ไม่ใช่ภาพหน้าจอของตัวแก้ไข
เริ่มต้นด้วย Signature
เปิดเครื่องมือสร้างปุ่ม CSS ในส่วนพรีเซ็ต ให้เลือก Signature จากคอลเลกชัน Everyday ตั้งค่าข้อความปุ่มเป็น “Get started” ในพื้นที่โค้ด ให้ตั้งค่าชื่อคลาสเป็น cta-button
พรีเซ็ตจะแทนที่สไตล์เริ่มต้นและสไตล์เมื่อวางเมาส์ ในขณะที่ป้ายกำกับและชื่อคลาสของคุณจะยังคงอยู่ เลือกจุดเริ่มต้นของคุณก่อนทำการปรับแต่งโดยละเอียด
ชื่อคลาสจะเชื่อมต่อกฎ CSS เข้ากับปุ่ม HTML ของคุณ เครื่องมือสร้างจะล้างอักขระที่ไม่รองรับออก ให้ใช้ชื่อที่สั้นและโดดเด่นเพื่อหลีกเลี่ยงการจัดสไตล์องค์ประกอบที่ไม่เกี่ยวข้อง
สร้างปุ่มทรงแคปซูลแบบไล่ระดับสี
คงสถานะการแก้ไขไว้ที่ Default ในส่วนข้อความ ให้เลือก System sans, ขนาดตัวอักษร 18 px และน้ำหนักตัวหนา คงสีข้อความสีขาว สไตล์ปกติ การจัดตำแหน่งกึ่งกลาง และความสูงบรรทัด 1.4 ไว้
ในส่วน Fill ให้เลือก Linear gradient ใช้สองสีและมุมด้านล่าง ตั้งค่าระยะห่างแนวนอนเป็น 32 px และระยะห่างแนวตั้งเป็น 16 px ในส่วน Shape ให้เปิดใช้งาน Link all corners ไว้และตั้งค่ารัศมีมุมเป็น 100 px ความกว้างขอบยังคงเป็น 0 px
ในส่วน Shadow ให้เปิดใช้งาน Box shadow ไว้ ใช้ระยะห่างแนวนอน 0 px, ระยะห่างแนวตั้ง 8 px, ความเบลอ 24 px, การกระจาย −4 px, สี #460BD8 และความทึบ 32% ปิด Inset shadow และ Text shadow ไว้
ระยะห่าง (Padding) จะเปลี่ยนพื้นที่รอบข้อความ รัศมีมุม (Corner radius) จะเปลี่ยนโครงร่าง รัศมีขนาดใหญ่จะสร้างรูปทรงแคปซูลนี้โดยไม่ทำให้ป้ายกำกับกว้างขึ้น
กำหนดลักษณะเฉพาะเมื่อวางเมาส์
เปลี่ยนสถานะการแก้ไขเป็น Hover ในส่วน Fill ให้เปลี่ยนสีพื้นหลังเป็น #33099E และสีที่สองเป็น #6D20BF คงมุมการไล่ระดับสีไว้ที่ 135° ในส่วน Shadow ให้เปลี่ยนระยะห่างแนวตั้งเป็น 10 px และความเบลอเป็น 28 px คงการตั้งค่าอื่นๆ ไว้เหมือนเดิม
ใช้ปุ่ม Default, Hover และ Active บนผืนผ้าใบเพื่อตรวจสอบแต่ละสถานะ คุณยังสามารถวางเมาส์เหนือหรือกดปุ่มตัวอย่างได้ เปลี่ยนผืนผ้าใบระหว่างโหมดสว่างและมืดเพื่อตรวจสอบขอบและเงา
สถานะการแก้ไขจะเลือกสไตล์ที่คุณต้องการเปลี่ยน สถานะบนผืนผ้าใบจะเปลี่ยนเฉพาะสิ่งที่คุณดูตัวอย่างเท่านั้น ให้กลับไปที่การแก้ไข Default ก่อนปรับลักษณะการแสดงผลปกติ
คุณสมบัติเมื่อวางเมาส์ที่ยังคงตรงกับค่าเริ่มต้นจะตามหลังการแก้ไขค่าเริ่มต้นในภายหลัง เมื่อคุณปรับแต่งคุณสมบัติเมื่อวางเมาส์แล้ว มันจะยังคงเป็นอิสระ ตรวจสอบทั้งสองสถานะอีกครั้งหลังจากเปลี่ยนสไตล์พื้นฐาน
ส่งออกและทดสอบในหน้าเว็บของคุณ
เลือกแท็บ CSS และใช้ Copy CSS หรือเลือก Download เพื่อบันทึก cta-button.css เลือกแท็บ HTML และคัดลอกมาร์กอัปปุ่มที่ตรงกัน HTML จะรวมชื่อคลาสเดียวกันและปุ่มที่มี type="button"
เพิ่ม CSS ลงในสไตล์ชีตของคุณ หรือลิงก์ไฟล์ที่ดาวน์โหลดจากหน้าเว็บของคุณ วาง HTML ไว้ในที่ที่ปุ่มควรอยู่ การส่งออกทั้งสองอย่างทำงานร่วมกัน: ปุ่ม HTML เพียงอย่างเดียวจะไม่มีสไตล์รวมอยู่ด้วย
เปิดหน้าเว็บและทดสอบสถานะค่าเริ่มต้น, เมื่อวางเมาส์, การโฟกัสด้วยแป้นพิมพ์ และสถานะเมื่อกด การส่งออกรวมถึงโครงร่าง focus-visible, การเคลื่อนไหวเล็กน้อยเมื่อกด และกฎลดการเคลื่อนไหว สไตล์โดยรอบและฟอนต์ที่ติดตั้งของคุณยังคงส่งผลต่อผลลัพธ์ได้
ปุ่มที่สร้างขึ้นเป็นตัวควบคุมที่มีสไตล์ เชื่อมต่อพฤติกรรมการคลิกในโปรเจกต์ของคุณ ใช้ประเภทปุ่มที่ถูกต้องเมื่อเพิ่มลงในแบบฟอร์ม
cta-button.css
ชื่อไฟล์ที่ดาวน์โหลดจะตามชื่อคลาส
คำถามที่พบบ่อย
ฉันจำเป็นต้องมีเฟรมเวิร์ก CSS หรือไม่?
ไม่จำเป็น ผลลัพธ์คือ CSS มาตรฐานบวกกับปุ่ม HTML ธรรมดา วาง CSS ลงในสไตล์ชีตของคุณเองและใช้คลาสที่ตรงกันบนปุ่ม
การดาวน์โหลดจะบันทึก HTML ด้วยหรือไม่?
การดาวน์โหลดจะบันทึกไฟล์ .css ที่ตั้งชื่อตามคลาส คัดลอกมาร์กอัปปุ่มแยกต่างหากจากแท็บ HTML
ฉันสามารถกำหนดรัศมีให้แต่ละมุมต่างกันได้ไหม?
ได้ ในส่วน Shape ให้ปิด Link all corners จากนั้นตั้งค่า Top left, Top right, Bottom right และ Bottom left แยกกัน ตัวอย่างนี้คงการเชื่อมโยงไว้เพื่อให้ได้รูปทรงแคปซูล
ดีไซน์ของฉันจะยังคงอยู่ที่นี่ในครั้งถัดไปหรือไม่?
สตูดิโอจะพยายามบันทึกร่างปัจจุบันไว้ในที่จัดเก็บข้อมูลภายในเบราว์เซอร์นี้ นี่ไม่ใช่บัญชีผู้ใช้หรือการสำรองข้อมูลข้ามอุปกรณ์ การตั้งค่าเบราว์เซอร์ การล้างข้อมูลเว็บไซต์ หรือการรีเซ็ตอาจทำให้ข้อมูลนี้ถูกลบหรือแทนที่ได้ ดังนั้นโปรดส่งออกงานที่คุณต้องการเก็บไว้
ปุ่มของฉันถูกอัปโหลดไปยังเซิร์ฟเวอร์หรือไม่?
การแสดงตัวอย่างสไตล์และการสร้าง CSS/HTML จะทำงานภายในเบราว์เซอร์ของคุณ โปรแกรมแก้ไขนี้ไม่ได้อัปโหลดข้อความปุ่มหรือร่างสไตล์ของคุณเพื่อสร้างไฟล์ส่งออก
สร้างสไตล์ให้กับปุ่มถัดไปของคุณ
เลือกจุดเริ่มต้น ปรับแต่งรายละเอียด และนำโค้ดไปใช้ในโปรเจกต์ของคุณ