ลองทำ Toggle Switch ด้วย CSS only!

ช่วงนี้เรากำลังฝึกทำเว็บอย่างจริงจัง แล้วกำลังลองหา Toggle Switch จากใน CSS Framework ดูเพื่อเอามาใช้ในเว็บตัวเอง ปรากฎว่าหน้าตาของ Toggle Switch แต่ละเจ้าไม่มีอย่างที่ต้องการเลย ยกตัวอย่างเช่น

Bootstrap

Ant Design

แต่ละอันที่คือไม่ผ่านเลยย แต่ไม่เป็นไรเมื่อของคนอื่นไม่สวย เราก็ไม่ง้อ มาทำเองกันเถอะ

วันนี้เลยจะมาแชร์วิธีทำปุ่ม Toggle แบบอลังๆโดยใช้แค่ CSS เพียงอย่างเดียวเท่านั้น!
ในวันนี้จะมาลองทำให้ดูทั้งหมด 3 แบบ ได้แก่ ปุ่ม On / Off , ปุ่มสลับ Dark / Light Mode และปุ่ม Activate

เริ่มกันที่ตัวอย่างแรกเลย นั่นก็คือ ปุ่ม On / Off
ขั้นแรก เตรียม Code HTML ขึ้นมาก่อน

<section>
    <label for="toggle-1" class="toggle-1">
        <input type="checkbox" name="toggle-1" id="toggle-1" class="toggle-1__input">
        <span class="toggle-1__button"></span>
    </label>
</section>

เริ่มจากการใส่ input checkbox ธรรมดาๆ ลงไป และมีแถม span เพื่อเอาไปแต่งหน้าตาใน step ต่อไป จะได้หน้าตาเว็บออกมาประมาณนี้

จากนั้นจะเริ่มแต่ง CSS ให้กับ Element ของเรา โดยเราจะซ่อนตัว input จริงๆออกไปเลย และจะแต่ง span ให้ออกมาเป็นหน้าตาที่เราต้องการ จะเห็นว่าใน HTML เราใส่ label ครอบ input เอาไว้ สิ่งนี้จะทำให้เราสามารถกดที่ span แล้วทำให้กล่อง checkbox ถูกติ๊กได้

.toggle-1 {
    display: inline-block;
    vertical-align: top;
    margin: 0 15px 0 0;
}

.toggle-1__input {
    display: none;
}

.toggle-1__button {
    position: relative;
    cursor: pointer;
    display: inline-block;

    font-family: 'Roboto', sans-serif;
    text-transform: uppercase;
    font-size: 1rem;
    line-height: 20px;

    width: 120px;
    height: 40px;
    color: white;
    background-color: #f2395a;
    border: solid 1px #f2395a;
    box-shadow: 0 0 12px rgba(255, 61, 94, 0.5);

    transition: all 0.3 ease;
}

หลังจากแต่ง CSS ให้กับ Element ของเราแล้ว จะได้ออกมาเป็นกล่องสำหรับ Toggle แล้ว ยังขาดปุ่ม Off ซึ่งเราจะเพิ่ม style ให้ .toggle-1__button::before และใส่ content: “off"ตามตัวอย่างข้างล่างนี้เลย

.toggle-1__button::before {
  position: absolute;
  display: flex;
  align-items: center;

  top: 4px;
  left: 60px;
  height: 30px;
  padding: 0 10px;

  content: "off";
  background: white;
  color: #f2395a;
  transition: all 0.3s ease;

}

ตอนนี้ได้ปุ่ม Off ออกมาอย่างสวยงามแล้ว อย่างสุดท้ายก็คือ จะต้องทำให้เมื่อโดนกดแล้วมีการเปลี่ยนจาก Off เป็น On และพื้นหลังสีแดงกลายเป็นสีเขียวโดย เราจะใส่ style ให้ .toggle-1__input:checked ให้ไปเปลี่ยน style ใน class อื่นๆ

.toggle-1__input:checked + .toggle-1__button {
    background: #8ECF45;
    border: solid 1px #8ECF45;
    box-shadow: 0 2px 20px rgba(142, 207, 69, 0.5);

}

.toggle-1__input:checked + .toggle-1__button::before {
    content: 'on';
    left: 5px;
    color:#8ECF45;
}

ก็จะได้ ปุ่ม toggle on/off ที่สวยงามแบบนี้นั่นเอง

ต่อไปเป็นตัวอย่างที่ 2 : ปุ่ม Dark / Light mode

ตัวอย่างสุดท้าย : ปุ่ม Activate

ไม่ยากเลยใช่มั้ยกับการทำปุ่ม Toggle Switch ด้วย CSS ทีนี้ทุกคนสามารถสร้างปุ่ม Toggle สวย ๆ มาใช้เองโดยไม่ต้องพึ่ง Framework อีกต่อไป ใครลองทำปุ่ม Toggle Switch หน้าตาแปลกๆก็ส่งมาให้ดูกันได้น้า

และสามารถอ่าน Source code แบบเต็มๆได้ ที่นี่
หรืออยากดู Website ตัวอย่างงานได้ ที่นี่

ถ้าใครชอบก็อย่าลืมกดติดตาม Code’s Dairy เพื่อจะได้ไม่พลาด Content ใหม่ ๆ ของเราด้วยน้า ♡

Code's Diary