ปุ่ม CSS - คู่มือฉบับย่อ

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

  • bttn.css- ห้องสมุด bttn.css มีคอลเลกชันรูปแบบเรียบง่ายมากมายสำหรับปุ่ม ห้องสมุดนี้ฟรีสำหรับการใช้งานส่วนตัวและเชิงพาณิชย์ ปุ่มเหล่านี้สามารถปรับแต่งได้อย่างง่ายดาย

  • Pushy Buttons - ไลบรารี Pushy Buttons เป็นไลบรารี CSS Pressable Buttons ขนาดเล็ก

  • btns.css - ไลบรารีปุ่ม btns.css คือชุดของปุ่ม CSS ที่ใช้ประโยชน์จากการเปลี่ยนที่ราบรื่น

  • Social Buttons - ไลบรารีปุ่มโซเชียลเป็นชุดของปุ่ม CSS ที่สร้างขึ้นใน CSS บริสุทธิ์และใช้ Bootstrap และ Font Awesome

  • Beautons- ไลบรารีปุ่ม Beautons เป็นชุดเครื่องมือ CSS ง่ายๆสำหรับการสร้างปุ่ม ช่วยให้สามารถใช้รูปแบบขนาดต่างๆร่วมกันเพื่อสร้างชุดปุ่มขนาดใหญ่ที่สม่ำเสมอแข็งแรงและมั่นคง

ไลบรารี bttn.css มีคอลเลกชันสไตล์เรียบง่ายจำนวนมากสำหรับปุ่มต่างๆ ห้องสมุดนี้ฟรีสำหรับการใช้งานส่วนตัวและเชิงพาณิชย์ ปุ่มเหล่านี้สามารถปรับแต่งได้อย่างง่ายดาย

กำลังโหลด bttn.css

ในการโหลดไลบรารี btns.css ให้ไปที่ลิงก์btns.cssและวางบรรทัดต่อไปนี้ในส่วน <head> ของเว็บเพจ

<head>
   <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bttn.css/0.2.4/bttn.css">
</head>

การใช้ปุ่ม

สร้างปุ่มโดยใช้แท็กปุ่ม html และเพิ่มสไตล์ bttn-slant, bttn-royal พร้อมตัวระบุขนาด bttn-lg

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bttn.css/0.2.4/bttn.css">
   </head>
   
   <body>
      <button class = "bttn-slant">Submit</button>
   </body>
</html>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -

การกำหนดขนาด

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

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bttn.css/0.2.4/bttn.css">
   </head>
   
   <body>
      <button class = "bttn-pill bttn-lg">Large</button>
      <button class = "bttn-pill bttn-md">Medium</button>
      <button class = "bttn-pill bttn-sm">Small</button>
      <button class = "bttn-pill bttn-xs">Extra Small</button>
   </body>
</html>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -

การกำหนดสี

เช่นเดียวกับขนาดคุณสามารถกำหนดสีของปุ่มโดยใช้ CSS ตัวอย่างต่อไปนี้แสดงวิธีการเปลี่ยนสีของปุ่ม

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bttn.css/0.2.4/bttn.css">
   </head>
   
   <body>
      <button class = "bttn-pill bttn-lg bttn-primary">Primary</button>
      <button class = "bttn-pill bttn-md bttn-warning">Warning</button>
      <button class = "bttn-pill bttn-sm bttn-danger">Danger</button>
      <button class = "bttn-pill bttn-xs bttn-success">Success</button>
      <button class = "bttn-pill bttn-xs bttn-royal">Royal</button>
   </body>
</html>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -

ต่อไปนี้เป็นรูปแบบต่างๆที่มีอยู่ใน bttn.css

เลขที่ สไตล์ ขนาดกลาง สีหลัก การสาธิต
1 bttn- เอียง bttn-md bttn- หลัก
2 bttn- รวมกัน bttn-md bttn- หลัก
3 bttn ยา bttn-md bttn- หลัก
4 bttn- ลอย bttn-md bttn- หลัก
5 bttn- วัสดุแบน bttn-md bttn- หลัก
6 bttn- วัสดุวงกลม bttn-md bttn- หลัก
7 bttn เติมวงกลม bttn-md bttn- หลัก
8 bttn- การไล่ระดับสี bttn-md bttn- หลัก
9 bttn- วุ้น bttn-md bttn- หลัก
10 bttn- ยืด bttn-md bttn- หลัก
11 bttn น้อยที่สุด bttn-md bttn- หลัก
12 bttn-bordered bttn-md bttn- หลัก
13 bttn-simple bttn-md bttn- หลัก

ไลบรารี Pushy Buttons เป็นไลบรารี CSS Pressable Buttons ขนาดเล็ก

กำลังโหลด bttn.css

ในการโหลดไลบรารี pushy-buttons.min.css ให้ดาวน์โหลด css จากgithubและวางบรรทัดต่อไปนี้ในส่วน <head> ของเว็บเพจ

<head>
   <link rel = "stylesheet" href = "pushy-buttons.min.css">
</head>

การใช้ปุ่ม

สร้างปุ่มโดยใช้แท็กปุ่ม html และเพิ่มสไตล์ btn, btn-blue พร้อมตัวระบุขนาด btn-lg

<html>
   <head>
      <link rel = "stylesheet" href = "/css_buttons/pushy-buttons.min.css">
   </head>
   
   <body>
      <button class = "btn btn--blue">Submit</button>
   </body>
</html>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -

การกำหนดขนาด

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

<html>
   <head>
      <link rel = "stylesheet" href = "/css_buttons/pushy-buttons.min.css">
   </head>
   
   <body>
      <button class = "btn btn--lg btn--blue">Large</button>
      <button class = "btn btn--df btn--blue">Normal</button>
      <button class = "btn btn--md btn--blue">Medium</button>
      <button class = "btn btn--sm btn--blue">Small</button>
   </body>
</html>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -

การกำหนดสี

เช่นเดียวกับขนาดคุณสามารถกำหนดสีของปุ่มโดยใช้ CSS ตัวอย่างต่อไปนี้แสดงวิธีการเปลี่ยนสีของปุ่ม

<html>
   <head>
      <link rel = "stylesheet" href = "/css_buttons/pushy-buttons.min.css">
   </head>
   
   <body>
      <button class = "btn btn--lg btn--red">Large</button>
      <button class = "btn btn--df btn--green">Normal</button>
      <button class = "btn btn--md btn--blue">Medium</button>
   </body>
</html>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -

ไลบรารีปุ่ม btns.css คือชุดของปุ่ม CSS ที่ใช้ประโยชน์จากการเปลี่ยนที่ราบรื่น

กำลังโหลด bttn.css

ในการโหลดไลบรารี btns.css ให้ไปที่ลิงก์btns.cssและวางบรรทัดต่อไปนี้ในส่วน <head> ของเว็บเพจ

<head>
   <link rel = "stylesheet" href = "btns.css">
</head>

การใช้ปุ่ม

สร้างปุ่มโดยใช้แท็กปุ่ม html และเพิ่มสไตล์ btn, btn-blue พร้อมตัวระบุขนาด btn-lg

<html>
   <head>
      <link rel = "stylesheet" href = "/css_buttons/btns.css">
   </head>
   
   <body>
      <button class = "btn btn-blue">Submit</button>
   </body>
</html>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -

การกำหนดขนาด

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

<html>
   <head>
      <link rel = "stylesheet" href = "/css_buttons/btns.css">
   </head>
   
   <body>
      <button class = "btn btn-lg btn-blue">Large</button>   
      <button class = "btn btn-sm btn-blue">Small</button>
   </body>
</html>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -

การกำหนดสี

เช่นเดียวกับขนาดคุณสามารถกำหนดสีของปุ่มโดยใช้ CSS ตัวอย่างต่อไปนี้แสดงวิธีการเปลี่ยนสีของปุ่ม

<html>
   <head>
      <link rel = "stylesheet" href = "/css_buttons/btns.css">
   </head>
   
   <body>
      <button class = "btn btn-lg btn-red">Red</button>   
      <button class = "btn btn-lg btn-blue">Blue</button>
      <button class = "btn btn-lg btn-green">Green</button>
      <button class = "btn btn-lg btn-sea">Sea</button>   
      <button class = "btn btn-lg btn-yellow">Yellow</button>
      <button class = "btn btn-lg btn-orange">Orange</button>  
      <button class = "btn btn-lg btn-purple">Purple</button>   
      <button class = "btn btn-lg btn-black">Black</button>
      <button class = "btn btn-lg btn-cloud">Cloud</button>
      <button class = "btn btn-lg btn-grey">Grey</button>
   </body>
</html>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -

การกำหนดรูปแบบ

เช่นเดียวกับขนาดสีคุณสามารถกำหนดรูปแบบของปุ่มโดยใช้ CSS ตัวอย่างต่อไปนี้แสดงวิธีการเปลี่ยนรูปแบบของปุ่ม

<html>
   <head>
      <link rel = "stylesheet" href = "/css_buttons/btns.css">
   </head>
   
   <body>
      <button class = "btn btn-lg btn-blue">Regular</button>   
      <button class = "btn btn-lg btn-blue btn-round">Round</button>
      <button class = "btn btn-lg btn-blue btn-raised">Raised</button>
      <button class = "btn btn-blue btn-sm">Small</button>   
      <button class = "btn btn-lg btn-outline-blue ">Outlined</button>
   </body>
</html>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -

ไลบรารีปุ่มโซเชียลเป็นชุดของปุ่ม CSS ที่สร้างขึ้นใน CSS บริสุทธิ์และใช้ Bootstrap และ Font Awesome

กำลังโหลดปุ่มโซเชียล

ในการโหลดไลบรารี bootstrap-social.css ให้ดาวน์โหลด bootstrap-social.css จากgithubและวางบรรทัดต่อไปนี้ในส่วน <head> ของเว็บเพจ

<head>
   <link rel = "stylesheet" href = "bootstrap-social.css">
</head>

การใช้ปุ่ม

สร้างปุ่มโดยใช้แท็กจุดยึด html และเพิ่มสไตล์ btn, btn-block ด้วยตัวระบุโซเชียล btn-social

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
      <link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
      <link rel = "stylesheet" href = "/css_buttons/bootstrap-social.css">
   </head>
   
   <body>
      <a class = "btn btn-block btn-social btn-twitter">
         <span class = "fa fa-twitter"></span>
         Login with Twitter
      </a>
   </body>
</html>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -

เข้าสู่ระบบด้วย Twitter

การกำหนดขนาด

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

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
      <link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
      <link rel = "stylesheet" href = "/css_buttons/bootstrap-social.css">
   </head>
   
   <body>
      <a class = "btn btn-block btn-lg btn-social btn-twitter">
         <span class = "fa fa-twitter"></span>
         Login with Twitter
      </a>
      <a class = "btn btn-block btn-md btn-social btn-twitter">
         <span class = "fa fa-twitter"></span>
         Login with Twitter
      </a>
      <a class = "btn btn-block btn-sm btn-social btn-twitter">
         <span class = "fa fa-twitter"></span>
         Login with Twitter
      </a>
      <a class = "btn btn-block btn-xs btn-social btn-twitter">
         <span class = "fa fa-twitter"></span>
         Login with Twitter
      </a>
   </body>
</html>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -

เข้าสู่ระบบด้วย Twitter เข้าสู่ระบบด้วย Twitter เข้าสู่ระบบด้วย Twitter เข้าสู่ระบบด้วย Twitter

ใช้ไอคอนเท่านั้น

ตัวอย่างต่อไปนี้แสดงวิธีการเลือกปุ่มไอคอนเท่านั้น

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
      <link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
      <link rel = "stylesheet" href = "bootstrap-social.css">
   </head>
   
   <body>
      <a class = "btn btn-social-icon btn-twitter">
         <span class = "fa fa-twitter"></span>
      </a>   
   </body> 
</html>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -

ต่อไปนี้เป็นรูปแบบต่างๆที่มีอยู่ในปุ่มโซเชียล

ซีเนียร์ สไตล์ ขนาดกลาง ปุ่ม ปุ่มไอคอน
1 btn-twitter btn-md เข้าสู่ระบบด้วย Twitter
2 btn-bitbucket btn-md เข้าสู่ระบบด้วย Bitbucket
3 btn-dropbox btn-md เข้าสู่ระบบด้วย Dropbox
4 btn-facebook btn-md เข้าสู่ระบบด้วย Facebook
5 btn-btn-flickr btn-md เข้าสู่ระบบด้วย Flickr
6 btn-btn-foursquare btn-md เข้าสู่ระบบด้วย Foursquare
7 btn-btn-github btn-md เข้าสู่ระบบด้วย Github
8 btn-btn-google btn-md เข้าสู่ระบบด้วย Google
9 btn-btn-instagram btn-md เข้าสู่ระบบด้วย Instagram
10 btn-btn-linkedin btn-md เข้าสู่ระบบด้วย Linkedin
11 btn-btn-microsoft btn-md เข้าสู่ระบบด้วย Microsoft
12 btn-btn-odnoklassniki btn-md เข้าสู่ระบบด้วย Odnoklassniki
13 btn-btn-openid btn-md เข้าสู่ระบบด้วย Openid
14 btn-btn-pinterest btn-md เข้าสู่ระบบด้วย Pinterest
15 btn-btn-reddit btn-md เข้าสู่ระบบด้วย Reddit
16 btn-btn-soundcloud btn-md เข้าสู่ระบบด้วย Soundcloud
17 btn-btn-tumblr btn-md เข้าสู่ระบบด้วย Tumblr
18 btn-btn-twitter btn-md เข้าสู่ระบบด้วย Twitter
19 btn-btn-vimeo btn-md เข้าสู่ระบบด้วย Vimeo
20 btn-btn-vk btn-md เข้าสู่ระบบด้วย Vk
21 btn-btn-yahoo btn-md เข้าสู่ระบบด้วย Yahoo

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

กำลังโหลด Beautons

ในการโหลดไลบรารี Beautons ให้ดาวน์โหลด css จากgithubและวางบรรทัดต่อไปนี้ในส่วน <head> ของเว็บเพจ

<head>
   <link rel = "stylesheet" href = "beauton.min.css">
</head>

การใช้ปุ่ม

สร้างปุ่มโดยใช้แท็กปุ่ม html และเพิ่มสไตล์ btn

<html>
   <head>
      <link rel = "stylesheet" href = "/css_buttons/beauton.min.css">
   </head>
   
   <body>
      <button class = "btn"<Submit</button>
   </body>
</html>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -

การกำหนดขนาด

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

<html>
   <head>
      <link rel = "stylesheet" href = "/css_buttons/beauton.min.css">
   </head>
   
   <body>
      <button class = "btn btn--small">Small</button> <br/> <br/> 
      <button class = "btn btn--large btn-blue">Large</button><br/><br/>
      <button class = "btn btn--huge">Huge</button><br/><br/>
      <button class = "btn btn--full">Full</button><br/><br/>
   </body>
</html>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -









การกำหนดขนาดตัวอักษร

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

<html>
   <head>
      <link rel = "stylesheet" href = "/css_buttons/beauton.min.css">
   </head>
   
   <body>
      <button class = "btn btn--alpha">Huge</button><br/><br/>
      <button class = "btn btn--beta">Large</button><br/><br/>
      <button class = "btn btn--gamma">Regular</button><br/><br/>
   </body>
</html>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -







การกำหนดปุ่มการทำงาน

ตัวอย่างต่อไปนี้แสดงปุ่มการทำงานต่างๆ

<html>
   <head>
      <link rel = "stylesheet" href = "/css_buttons/beauton.min.css">
   </head>
   
   <body>
      <button class = "btn btn--positive">Positive</button> <br/>  <br/>
      <button class = "btn btn--negative">Negative</button><br/><br/>
      <button class = "btn btn--inactive">Disabled</button><br/><br/>
      <button class = "btn btn--soft">Rounded</button><br/><br/>
      <button class = "btn btn--hard">Hard</button><br/><br/>
   </body>
</html>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -











การรวมสไตล์

ตัวอย่างต่อไปนี้แสดงวิธีการรวมรูปแบบของปุ่มต่างๆ

<html>
   <head>
      <link rel = "stylesheet" href = "/css_buttons/beauton.min.css">
   </head>
   
   <body>
      <button class = "btn btn--large btn--positive">Button</button>   <br/><br/>
      <button class = "btn btn--positive btn--alpha btn--small">Button</button><br/><br/>
      <button class = "btn btn--negative btn--full btn--soft">Button</button><br/><br/>
      <p>A <button class = "btn  btn--natural">button</button> in a paragraph.</p><br/><br/>
   </body>
</html>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -







ในย่อหน้า