เริ่มต้นด้วยสไตล์ที่คุณชอบ
เรียกดูค่าที่ตั้งไว้ล่วงหน้า 44 จากคอลเลกชัน Everyday, Classic, Shaped, Expressive, Gradients และ Elite ทุกค่าที่ตั้งไว้ล่วงหน้าคือจุดเริ่มต้นที่คุณสามารถแก้ไขได้
ค่าที่ตั้งไว้ล่วงหน้าส่งผลต่อการออกแบบของคุณอย่างไร
เลือกก่อน แล้วค่อยปรับแต่ง
ใช้คอลเลกชัน Style เพื่อจำกัดการแสดงผลในแกลเลอรี การใช้ค่าที่ตั้งไว้ล่วงหน้าจะแทนที่ทั้งสไตล์เริ่มต้นและสไตล์เมื่อวางเมาส์ โดยยังคงข้อความบนปุ่มและชื่อคลาสของคุณไว้
ลองใช้การเติมสีแบบทึบ มุมโค้ง เส้นขอบที่คมชัด หรือการตกแต่งที่โดดเด่นยิ่งขึ้น เมื่อคุณพบทิศทางที่ต้องการแล้ว ให้ใช้แท็บอื่นๆ เพื่อปรับรายละเอียดให้เข้ากับหน้าเว็บของคุณ
ตั้งค่าข้อความบนปุ่ม ตระกูลฟอนต์ ขนาด น้ำหนัก ระยะห่าง ความสูงบรรทัด การจัดตำแหน่ง และสีข้อความ ดูการอัปเดตของป้ายกำกับในขณะที่คุณทำงาน
ปรับแต่งข้อความและระยะห่าง
รูปแบบตัวอักษรที่เหมาะกับการใช้งาน
ข้อความประกอบด้วยการควบคุมฟอนต์และช่องข้อความปุ่มที่สอง ขนาดฟอนต์มีตั้งแต่ 10 ถึง 80 พิกเซล ตระกูลฟอนต์ที่แสดงรายการใช้ฟอนต์ที่มีอยู่บนอุปกรณ์ของผู้เข้าชม
ใช้ป้ายกำกับสั้นๆ ที่อธิบายการทำงาน ในส่วน Fill การเพิ่มระยะห่างภายในทั้งแนวนอนและแนวตั้งจะช่วยเพิ่มพื้นที่รอบข้อความโดยไม่เปลี่ยนขนาดตัวอักษร ตรวจสอบป้ายกำกับที่ยาวขึ้นในหน้าเว็บที่จะนำปุ่มไปใช้
เลือกการเติมสีแบบทึบหรือแบบไล่ระดับ
ใช้สีพื้นหลังสีเดียวหรือผสมสองสีด้วยการไล่ระดับสีแบบเชิงเส้น ตัวเลือกสีและช่องใส่ค่า Hex ช่วยให้คุณทำงานได้อย่างเห็นภาพหรือแม่นยำ
ตั้งค่าสีและทิศทางการไล่ระดับสี
สองสี หนึ่งทิศทางที่ชัดเจน
ในส่วน Fill ให้เปลี่ยนสไตล์การเติมเป็น Linear gradient เพื่อแสดงสีที่สองและมุมการไล่ระดับสี มุมมีตั้งแต่ 0 ถึง 360 องศา
ช่อง Hex รองรับสีแบบหกหลักเต็มหรือแบบย่อสามหลัก ทดสอบป้ายกำกับสีขาวหรือสีกับปลายทั้งสองด้านของการไล่ระดับสี สตูดิโอไม่ได้รับรองความคมชัดของข้อความโดยอัตโนมัติ
ปรับมุมที่เชื่อมโยงหรือแยกจากกัน ความกว้างและสไตล์ของเส้นขอบ เงากล่อง และเงาข้อความ ให้ปุ่มมีรูปร่างที่เหมาะสมกับบริบท
สำรวจมุม เส้นขอบ และเงา
จากสี่เหลี่ยมที่คมชัดไปจนถึงรูปทรงแคปซูลที่นุ่มนวล
ในส่วน Shape ให้เปิด Link all corners ไว้สำหรับรัศมีที่ใช้ร่วมกัน หรือปิดเพื่อตั้งค่าแต่ละมุม สไตล์เส้นขอบประกอบด้วย solid, dashed, dotted, double, inset, outset, ridge, groove และ none
ในส่วน Shadow ให้ตั้งค่าออฟเซ็ตแนวนอนและแนวตั้ง ความเบลอ สี และความโปร่งใส เงากล่องยังมีตัวเลือกการกระจายและสวิตช์ inset เงาข้อความแยกต่างหาก ดังนั้นคุณจึงสามารถเพิ่มความลึกให้กับป้ายกำกับโดยไม่เปลี่ยนเส้นขอบของปุ่ม
แก้ไขสไตล์ Default และ Hover แยกกัน ดูตัวอย่างลักษณะ Default, Hover และ Active จากนั้นเปรียบเทียบปุ่มบนพื้นหลังสีอ่อนและสีเข้ม
ทำความเข้าใจสถานะการแก้ไขและตัวอย่าง
สองสไตล์ที่แก้ไขได้ สามสถานะตัวอย่าง
สถานะการแก้ไขจะเลือกสไตล์ที่การควบคุมของคุณจะเปลี่ยนแปลง ปุ่มสถานะบนผืนผ้าใบจะเลือกเฉพาะตัวอย่างเท่านั้น การวางเมาส์หรือกดที่ตัวอย่างจะแสดงการโต้ตอบด้วย
ค่า Hover ที่ยังคงตรงกับค่าเริ่มต้นจะติดตามการแก้ไขพื้นฐานจนกว่าจะมีการปรับแต่ง CSS ที่ส่งออกจะรวมกฎการวางเมาส์เมื่อจำเป็น เส้นขอบ focus-visible การเคลื่อนไหวเมื่อกด และกฎการลดการเคลื่อนไหว
นำ CSS เข้าสู่โปรเจกต์ของคุณ
คัดลอก CSS ที่สร้างขึ้นและปุ่ม HTML ที่ตรงกัน หรือดาวน์โหลดสไตล์ชีต ชื่อคลาสจะช่วยเชื่อมโยงทั้งสองส่วนเข้าด้วยกัน
คัดลอก ดาวน์โหลด และเก็บงานของคุณ
โค้ดธรรมดาที่คุณสามารถใช้ได้โดยตรง
เลือกชื่อคลาสที่โดดเด่น คัดลอก CSS จากแท็บ จากนั้นคัดลอกปุ่มจาก HTML การดาวน์โหลดจะบันทึกไฟล์ .css ที่ตั้งชื่อตามคลาส ไม่ใช่การดาวน์โหลดหน้าเว็บทั้งหมด
การดูตัวอย่างและการสร้างโค้ดทำงานในเบราว์เซอร์ของคุณ สตูดิโอพยายามจดจำร่างหนึ่งฉบับในที่จัดเก็บข้อมูลภายในของเบราว์เซอร์นี้ ให้ส่งออกสิ่งที่คุณต้องการเก็บไว้ การรีเซ็ตจะทำให้สตูดิโอกลับไปเป็นสไตล์เริ่มต้น
