สร้างปุ่มภาพเคลื่อนไหวโดยใช้ CSS3 วิธีสร้างปุ่มที่มีสไตล์โดยใช้ CSS ล้วนๆ วิธีสร้างปุ่มกลมใน html

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

หลักการสร้างปุ่มภาพเคลื่อนไหวโดยใช้ CSS มีดังต่อไปนี้ มีข้อกำหนดสามประการ 1 - เริ่มต้น 2 - เมื่อวางเคอร์เซอร์และ 3 - เมื่อกดปุ่มเมาส์ บริการบางอย่างมีข้อกำหนดทั้งสามข้อ ในขณะที่บริการอื่นๆ มีเพียงสองข้อเท่านั้น แต่สิ่งสำคัญคือคุณพอใจกับผลลัพธ์ที่ได้

วิดีโอสอนเกี่ยวกับวิธีที่สองในการสร้างปุ่มภาพเคลื่อนไหว:

ตัวอย่างเช่น ลองดูที่บริการ CSS3 ButtonGenerator ซึ่งมีเพียงสองข้อกำหนด แต่เอฟเฟกต์ดูดีมาก ใครสับสนกับการไม่มีภาษารัสเซีย ให้ใช้ตัวสร้างสุดท้ายที่ให้ไว้ในรายการ

มาเริ่มกันเลย

เปิดหน้าหลักของบริการ เริ่มแรกคุณจะเห็นมุมมองเบื้องต้นของปุ่มและเครื่องมือที่ให้คุณตั้งค่าได้ทุกประเภท

ส่วนแรก Text&Font มีหน้าที่รับผิดชอบเกี่ยวกับข้อความ ขนาดฟอนต์ สีฟอนต์ เงาของฟอนต์ นี่คือที่ที่คุณเขียนป้ายกำกับบนปุ่ม กำหนดขนาด สี และเงา

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

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

ส่วนถัดไป การแปลง มีหน้าที่รับผิดชอบในการเปลี่ยนปุ่ม - การหมุน การกระจัด การบิดเบือน

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

หลังจากลองหลายครั้งแล้วทดลองการตั้งค่าแล้วคุณจะเข้าใจว่าอะไรคืออะไร

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

ตัวเลือกการเลื่อนเมาส์

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

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

นี่คือตัวอย่างของเรา:

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

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

ป.ล. และนี่คือตัวอย่างปุ่มภาพเคลื่อนไหวสำหรับการฝึกอบรมของ Denis Gerasimov เรื่อง "การตั้งค่าการรับส่งข้อมูลที่ไม่เปิดเผยเพื่อโปรโมตลิงก์ Affiliate" ฉันจบการฝึกอบรมนี้และแนะนำให้ทุกคน - โดยไม่ต้องพูดเกินจริง นี่เป็นวิธีสร้างรายได้จากโปรแกรมพันธมิตรอย่างแท้จริง ซึ่งโดยพื้นฐานแล้วคือสิ่งที่ฉันทำ

สวัสดีผู้อ่านที่รัก เราได้ศึกษาคุณสมบัติหลายอย่างที่ปรากฎแล้ว CSS3แต่เพียงแค่รู้พวกเขาไม่เพียงพอ คุณต้องฝึกฝนอย่างแน่นอน! และวันนี้ผมจะพาคุณไปดู...

มาเปิดไฟล์กันดีกว่า ดัชนี.htmlและสร้างโครงสร้างที่เรียบง่าย

ไม่มีอะไรพิเศษ แค่ 3 บล็อกกับคลาส .ปุ่มมาดูสไตล์กันดีกว่า

ร่างกาย (

}

ปุ่ม (
จอแสดงผล: อินไลน์บล็อก;
ระยะขอบ: 40px;
ความกว้าง: 100px;
ความสูง: 100px;
พื้นหลัง: url (http://subtlepatterns.com/patterns/extra_clean_paper.png);
เคอร์เซอร์: ตัวชี้;
รัศมีชายแดน: 50%;

สิ่งที่ใส่เข้าไป 0 2px 0 rgba(255,255,255,.6)
0 2px 0 RGBA(0,0,0,.1)
สิ่งที่ใส่เข้าไป 0 0 20px rgba(0,0,0,.1);
}

ฉันเอาพื้นหลังของเอกสารและปุ่มของเราจากไซต์ ละเอียดรูปแบบ.com.

เราทำของเรา กอง line-block เพื่อให้เรียงกันในแนวนอน เราตั้งค่าความสูง ความกว้าง เยื้องจากขอบของเบราว์เซอร์ การปัดเศษ 50% เพื่อให้ได้วงกลมและเมื่อวางเคอร์เซอร์เราก็ทำ ตัวชี้- ไม่มีอะไรซับซ้อนที่นี่ แต่ก็ไม่ใช่เพื่ออะไรที่ฉันจะแยกเงาออกเป็นสไตล์เพราะ นี่เป็นส่วนที่อาจทำให้เกิดปัญหาได้ แม้ว่าทุกอย่างจะเรียบง่ายเช่นกัน และคุณจะเห็นสิ่งนี้ทันที

เมื่อวางเงาแรกแล้ว เราจะเห็นโครงร่างของวงกลมของเราแล้ว:

กล่องเงา: 0 3px 20px rgba (0,0,0,.25);

แล้วเราถาม เงาภายในเพื่อให้เรามีหน้าต่างอยู่ด้านบนและปุ่มก็ใหญ่ขึ้น

กล่องเงา: 0 3px 20px rgba (0,0,0,.25)
สิ่งที่ใส่เข้าไป 0 2px 0 rgba(255,255,255,.6);

จำเป็นต้องใช้เงาด้านนอกถัดไปเพื่อทำให้พื้นที่ใต้ปุ่มด้านล่างเข้มขึ้นเล็กน้อย และเงาด้านในถัดไปจะทำให้พื้นที่ภายในปุ่มมืดลงเพื่อให้เอฟเฟกต์มากขึ้น)

กล่องเงา: 0 3px 20px rgba (0,0,0,.25)
สิ่งที่ใส่เข้าไป 0 2px 0 rgba(255,255,255,.6)
0 2px 0 RGBA(0,0,0,.1)
สิ่งที่ใส่เข้าไป 0 0 20px rgba(0,0,0,.1);

อย่างที่คุณเห็น ในตอนแรกมันดูซับซ้อน มีคุณสมบัติมากมาย แต่ถ้าคุณลองพิจารณาดู ทุกอย่างจะง่ายขึ้นมาก นี่คือผลลัพธ์สุดท้ายของเรา:

ตอนนี้เรามาปรับใช้พฤติกรรมกัน เมื่อโฮเวอร์ต่อบล็อก

ปุ่ม:โฮเวอร์ (
กล่องเงา: ใส่ 0 0 20px rgba (0,0,0,.2)
0 2px 0 RGBA(255,255,255,.4)
สิ่งที่ใส่เข้าไป 0 2px 0 rgba(0,0,0,.1);
}

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

สุดท้ายนี้ มาเพิ่มไอคอนให้กับปุ่มของเราเพื่อไม่ให้น่าเบื่อเกินไป หากต้องการทำสิ่งนี้เรามาเปลี่ยนแปลงกันเล็กน้อย html

Btn-ภาพถ่าย (
พื้นหลัง: url (http://defaulticon.com/sites/default/files/styles/icon-front-page-32x32-preview/public/field/image/MD-camera-photo_0.png) ศูนย์กลาง ไม่ทำซ้ำ;
}

การตั้งค่า Btn (
พื้นหลัง: url (http://defaulticon.com/sites/default/files/styles/icon-front-page-32x32-preview/public/field/image/settings.png) ศูนย์กลาง ไม่ทำซ้ำ;
}

แท็ก Btn (
พื้นหลัง: url (http://defaulticon.com/sites/default/files/styles/icon-front-page-32x32-preview/public/field/image/tag.png) ศูนย์กลาง ไม่ทำซ้ำ;
}

ที่นี่เราเพียงแค่เพิ่มพื้นหลังที่สองสำหรับแต่ละปุ่ม โดยนำไอคอนจากไซต์ defaulticon.com.

แค่นั้นแหละ. วันนี้เรามาดูกัน วิธีสร้างปุ่มกลมใน css3.

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

ในตาราง 1 แสดงจำนวนค่าที่แตกต่างกันและประเภทของบล็อกที่ได้รับในกรณีนี้

รหัส	คำอธิบาย	ดู
div ( รัศมีเส้นขอบ: 10px; )	รัศมีการปัดเศษสำหรับทุกมุมในคราวเดียว
div ( รัศมีเส้นขอบ: 0 10px; )	ค่าแรกจะกำหนดรัศมีของมุมซ้ายบนและมุมขวาล่าง ค่าที่สองจะกำหนดรัศมีของมุมขวาบนและซ้ายล่าง
div ( รัศมีเส้นขอบ: 20px 10px 0; )	ค่าแรกจะกำหนดรัศมีของมุมซ้ายบน ค่าที่สอง - ทั้งมุมขวาบนและซ้ายล่าง และค่าที่สาม - มุมขวาล่าง
div ( รัศมีเส้นขอบ: 20px 10px 5px 0; )	ตั้งค่ารัศมีของมุมซ้ายบน ขวาบน ขวาล่าง และมุมซ้ายล่างตามลำดับ

ตัวอย่างที่ 1 แสดงวิธีการสร้างบล็อกที่มีมุมโค้งมน

ตัวอย่างที่ 1 มุมของบล็อก

HTML5 CSS3 IE 9+ Cr Op Sa Fx

ผลลัพธ์ของตัวอย่างนี้แสดงไว้ในรูปที่ 1 1.

ข้าว. 1. บล็อกที่มีมุมมน

สามารถรับเอฟเฟกต์ที่น่าสนใจได้หากคุณตั้งค่ารัศมีการปัดเศษให้มากกว่าครึ่งหนึ่งของความสูงและความกว้างขององค์ประกอบ ในกรณีนี้คุณจะได้วงกลม ตัวอย่างที่ 2 แสดงวิธีการสร้างปุ่มกลมพร้อมรูปภาพ

ตัวอย่างที่ 2: ปุ่มกลม

HTML5 CSS3 IE 9+ Cr Op Sa Fx

ผลลัพธ์ของตัวอย่างนี้แสดงไว้ในรูปที่ 1 2.

ข้าว. 2. ปุ่มกลม

ในเบราว์เซอร์ Opera ให้ปัดเศษเป็น ถูกใช้อย่างไม่ถูกต้องหากไม่ได้ระบุเส้นขอบผ่านคุณสมบัติเส้นขอบ

คุณสมบัติ border-radius สามารถใช้ร่วมกับคุณสมบัติอื่นได้ เช่น การเพิ่มเงาให้กับองค์ประกอบ ในตัวอย่างที่ 3 มีการสร้างชุดของวงกลม ซึ่งหนึ่งในนั้นถูกเน้นโดยใช้ box-shadow ชุดนี้สามารถใช้เพื่อเลื่อนดูหน้าหรือรูปถ่ายได้

ตัวอย่างที่ 3 เรืองแสง

HTML5 CSS3 IE 9+ Cr Op Sa Fx

ผลลัพธ์ของตัวอย่างนี้แสดงไว้ในรูปที่ 1 3.

ข้าว. 3. เรืองแสงเป็นวงกลม

การใช้ border-radius คุณสามารถสร้างได้ไม่เพียงแค่วงกลมเท่านั้น แต่ยังสามารถสร้างวงรีได้อีกด้วย เช่นเดียวกับการปัดเศษวงรีสำหรับบล็อก ในการทำเช่นนี้คุณไม่จำเป็นต้องเขียนค่าเดียว แต่มีสองค่าโดยคั่นด้วยเครื่องหมายทับ การเขียน 20px/10px หมายความว่ารัศมีแนวนอนของเนื้อปลาจะเป็น 20 พิกเซล และรัศมีแนวตั้งจะเป็น 10 พิกเซล ตัวอย่างที่ 4 แสดงวิธีสร้างมุมวงรีเพื่อเพิ่มคำบรรยายสไตล์หนังสือการ์ตูนให้กับภาพถ่าย

ตัวอย่างที่ 4: วงรี

HTML5 CSS3 IE 9+ Cr Op Sa Fx

คุณเป็นครูของคุณเอง

ผลลัพธ์ของตัวอย่างนี้แสดงไว้ในรูปที่ 1 4.

ข้าว. 4. การใช้มุมวงรี

คุณยังสามารถเปลี่ยนลักษณะที่ปรากฏของมุมบนรูปภาพได้ด้วยการเพิ่มคุณสมบัติ border-radius ให้กับตัวเลือก img ดังที่แสดงในตัวอย่างที่ 5

ตัวอย่างที่ 5: รูปภาพ

HTML5 CSS3 IE 9+ Cr Op Sa Fx

ก่อนที่เราจะดูปุ่มต่างๆ เรามาดูการตั้งค่าทั่วไปของปุ่มทั้งหมดกันก่อน

HTML

ปุ่มต่างๆ จะใช้โค้ด HTML ง่ายๆ:

สมัครสมาชิก

ซีเอสเอส

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

ButtonText ( แบบอักษร: 18px/1.5 Helvetica, Arial, sans-serif; color: #fff; ) a ( color: #fff; การตกแต่งข้อความ: none; )

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

รหัส CSS พื้นฐาน

ขั้นแรก เราเพียงแค่ต้องให้ปุ่มมีรูปร่างและสีเท่านั้น กำหนดความสูง 28px และความกว้าง 115px เพิ่มระยะขอบและช่องว่างภายใน และให้ปุ่มมีเส้นขอบสีอ่อน

#button1 ( พื้นหลัง: #6292c2; เส้นขอบ: 2px solid #eee; ความสูง: 28px; ความกว้าง: 115px; ระยะขอบ: 50px 0 0 50px; การขยาย: 0 0 0 7px; ล้น: ซ่อนไว้; จอแสดงผล: บล็อก; )

เอฟเฟกต์ CSS3

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

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

/*มุมโค้งมน*/ -webkit-border-radius: 15px;

-moz-border-รัศมี: 15px;

รัศมีเส้นขอบ: 15px;

/*การไล่ระดับสี*/ ภาพพื้นหลัง: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));

ภาพพื้นหลัง: -moz-linear-gradient (ด้านบน, rgba (0, 0, 0, 0), rgba (0, 0, 0, 0.2));

ภาพพื้นหลัง: -o-linear-gradient (ด้านบน, rgba (0, 0, 0, 0), rgba (0, 0, 0, 0.2));

ภาพพื้นหลัง: -ms-linear-gradient (ด้านบน, rgba (0, 0, 0, 0), rgba (0, 0, 0, 0.2));

ภาพพื้นหลัง: การไล่ระดับสีเชิงเส้น (ด้านบน, rgba (0, 0, 0, 0), rgba (0, 0, 0, 0.2));

ภาพเคลื่อนไหว CSS

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

เลื่อนเมาส์ไป

เอฟเฟกต์ CSS3

สิ่งที่เหลืออยู่คือการเพิ่มสไตล์เพื่อขยายปุ่มเมื่อคุณวางเมาส์ไว้เหนือมัน ปุ่มจะต้องมีความกว้าง 230px เพื่อแสดงข้อความทั้งหมด

/*มุมโค้งมน*/ -webkit-border-radius: 10px;

-moz-border-รัศมี: 15px;

-moz-border-รัศมี: 10px;

รัศมีเส้นขอบ: 10px;

/*การไล่ระดับสี*/ ภาพพื้นหลัง: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));

/*การไล่ระดับสี*/ ภาพพื้นหลัง: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));

ภาพพื้นหลัง: -moz-linear-gradient (ด้านบน, rgba (0, 0, 0, 0), rgba (0, 0, 0, 0.2));

ภาพพื้นหลัง: -o-linear-gradient (ด้านบน, rgba (0, 0, 0, 0), rgba (0, 0, 0, 0.2));

ภาพเคลื่อนไหว CSS

ภาพพื้นหลัง: -ms-linear-gradient (ด้านบน, rgba (0, 0, 0, 0), rgba (0, 0, 0, 0.2));

ภาพพื้นหลัง: การไล่ระดับสีเชิงเส้น (ด้านบน, rgba (0, 0, 0, 0), rgba (0, 0, 0, 0.2));

เอฟเฟกต์ CSS3

/*เงา*/ -webkit-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);

-moz-box-shadow: 0px 3px 1px rgba (0, 0, 0, 0.2);

-moz-border-รัศมี: 15px;

กล่องเงา: 0px 3px 1px rgba (0, 0, 0, 0.2);

แอนิเมชั่นแทบไม่ต่างจากตัวอย่างก่อนหน้านี้

/*การไล่ระดับสี*/ ภาพพื้นหลัง: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));

ตอนนี้ได้เวลาย้ายภาพพื้นหลังแล้ว ตำแหน่งเริ่มต้นคือ "0 0" ตั้งค่าพารามิเตอร์ที่สองเป็น 150px หากต้องการเลื่อนในแนวนอน คุณต้องเปลี่ยนพารามิเตอร์แรก

#button3:hover ( ตำแหน่งพื้นหลัง: 0px 150px; )

การจำลองการกดปุ่ม 3 มิติ

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

ภาพเคลื่อนไหว CSS

โค้ด CSS สำหรับปุ่มของเรา

#button4 ( พื้นหลัง: #5c5c5c; ข้อความ-เงา: 0px 2px 0px rgba(0, 0, 0, 0.3); ขนาดตัวอักษร: 22px; ความสูง: 58px; ความกว้าง: 155px; ระยะขอบ: 50px 0 0 50px; ล้น: ซ่อนอยู่ ; จอแสดงผล: บล็อก; การจัดตำแหน่งข้อความ: ความสูงบรรทัด: 58px;

เอฟเฟกต์ CSS3

ในกรณีนี้ CSS3 จะไม่เป็นตัวเลือกที่ดีอีกต่อไป เพื่อให้ได้ผล ต้องใช้เงาและการไล่ระดับสี เงาที่คมชัดจะสร้างลักษณะของปุ่ม 3D

/*มุมโค้งมน*/ -webkit-border-radius: 5px;

/*การไล่ระดับสี*/ ภาพพื้นหลัง: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));

-moz-border-รัศมี: 5px;

รัศมีเส้นขอบ: 5px;

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

• ในบทนี้เราจะใช้สไตล์พื้นฐานเช่น:
• องค์ประกอบหลอก :ก่อน :หลัง;
• การใช้ตำแหน่งกับเราวางตำแหน่งบล็อก
• การใช้คลาสหลอก :hover , :active เราจะกำหนดสไตล์สำหรับการโฮเวอร์และการคลิกเมาส์
• และสร้างแอนิเมชั่นที่ราบรื่นโดยใช้ทรานซิชัน การแปลง

โครงสร้างปุ่ม HTML

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

มาเปิดสภาพแวดล้อมการพัฒนาของเรากัน ในกรณีของฉันฉันใช้ PhpStormฉันจะสร้าง index.html ในนั้น เขียนชื่อ “ ปุ่ม CSS ภาพเคลื่อนไหวสาธิต- เราสร้าง

ในนั้นเราวางบล็อก div ด้วยปุ่ม class.dws (นี่จะเป็น wrapper สำหรับปุ่ม) ใน wrapper เราจะวางลิงค์ซึ่งเราจะวางสามบล็อก โดย div พร้อมคลาส .b-demo (นี่คือส่วนด้านซ้ายของปุ่ม) ตามด้วย div พร้อมคลาส .b-text (นี่คือ บล็อกด้านในที่มาพร้อมกับคำจารึก) และบล็อก div สุดท้ายที่มีคลาส .b-img ตามที่คุณเดาคือทางด้านขวาและเราจะวางรูปภาพไว้ในนั้น

ปุ่ม Div.dws>a>div.b-demo+div.b-text+div.b-img

คลิกนำไปใช้และโครงสร้างจะเกิดขึ้น

ในลิงค์เราจะใส่เครื่องหมายแฮช (#) เพื่อให้มันใช้งานได้ มาใส่ชื่อปุ่มกันเถอะ” การสาธิต" ในบล็อกกลางเราระบุข้อความ " ดูตัวอย่าง" และที่ด้านล่างเราแทรกเส้นทางไปยังรูปภาพ

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

เราระบุเส้นทางไปยังรูปภาพ src="img/icon.png" ระบุ alt="button" , на этом у нас каркас готов самой кнопки и можно переходить к оформлению стилей.!}

อธิบายรูปแบบ CSS ของปุ่ม

ขั้นตอนต่อไปคือการสร้าง ซีเอสเอส style.css และเชื่อมต่อกับหน้าดัชนี เราเชื่อมต่อฟอนต์ Cuprum ยอดนิยมทันที และเราไม่ต้องการไฟล์ดัชนีอีกต่อไป

ไปที่ style.css เพิ่มรูปภาพไปที่พื้นหลัง และรีเซ็ตช่องว่างภายในสำหรับองค์ประกอบทั้งหมดในบล็อก .dws-button

เนื้อความ( ภาพพื้นหลัง: url("img/ep_naturalwhite.png"); ) .dws-button *( ระยะขอบ: 0; การขยาย: 0; )

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

ปุ่ม Dws( ตระกูลแบบอักษร: Cuprum, Arial, Verdana, sans-serif; ความกว้าง: 250px; ความสูง: 70px; ระยะขอบ: 250px อัตโนมัติ; โครงร่าง: 1px solid #faa21a; )

ลบขีดเส้นใต้ออกจากลิงก์แล้วกำหนดเป็นสีเทา

ปุ่ม Dws a( การตกแต่งข้อความ: none; color: #2e2e30; )

จากนั้นเราจะเลือกบล็อกทันทีและกำหนดให้เป็นสีขาวสีเดียว

B-demo, .b-img( พื้นหลัง: #ffffff; )

ต่อไป เราจะอธิบายแต่ละบล็อกแยกกัน เลือกคลาส .b-demo และตั้งค่าความกว้างของบล็อกเป็น 105 พิกเซล ตั้งค่าความสูงโดยใช้ line-height: 70px;

จัดกึ่งกลางข้อความและเพิ่มแบบอักษรเป็น 30 พิกเซล ทำให้เป็นตัวพิมพ์ใหญ่ทั้งหมด และตั้งค่าช่องว่างภายในไปทางซ้ายและขวา

B-demo( width:105px; line-height: 70px; text-align: center; font-size: 30px; text-transform: uppercase; padding: 0 10px 0 15px; )

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

B-text( พื้นหลัง: #3e3f3e; สี: #ffffff; ขนาดตัวอักษร: 24px; ความกว้าง: 150px; ความสูงของบรรทัด: 20px; การจัดแนวข้อความ: ตรงกลาง; การขยาย: 10px 0 10px 10px; )

เลือกบล็อกที่ถูกต้องและตั้งค่าความกว้างเป็น 45 รูป ความสูงก็อยู่ที่ 45 ยอดเขาเช่นกัน .padding จะจัดองค์ประกอบรูปภาพให้อยู่ตรงกลางโดยเลื่อนไปทางขวาเล็กน้อย

B-img( width:45px; line-height: 45px; padding: 20px 0 0 20px; )

จากนั้นเราจะวางตำแหน่งองค์ประกอบเหล่านี้ให้สัมพันธ์กับบล็อกด้วยคลาส .dws-button เมื่อต้องการทำสิ่งนี้ ให้กำหนดตำแหน่งคลาส: สัมพันธ์;และบล็อกที่ซ้อนกันทั้งหมดมีตำแหน่ง: สัมบูรณ์; -

.dws-button( ตระกูลแบบอักษร: Cuprum, Arial, Verdana, sans-serif; ความกว้าง: 250px; ความสูง: 70px; ระยะขอบ: 250px อัตโนมัติ; โครงร่าง: 1px solid #faa21a;

ตำแหน่ง: ญาติ; ) .b-demo, .b-text, .b-img( ตำแหน่ง: สัมบูรณ์; )

บล็อกทั้งหมดได้รับการปรับให้เข้ากับพาเรนต์ และตอนนี้เรามาดูพวกมันและจัดกึ่งกลางพวกมันกันดีกว่าสำหรับคลาส .b-demo เราจะระบุตำแหน่งเริ่มต้นด้วยศูนย์จากด้านซ้ายและด้านบน และเพิ่ม z-index:10;

บล็อกที่มีข้อความจะเยื้องจากด้านซ้ายและด้านบนด้วยจอบ 5 อัน

.b-text( พื้นหลัง: #3e3f3e; สี: #ffffff; ขนาดตัวอักษร: 24px; ความกว้าง: 150px; ความสูงของบรรทัด: 20px; การจัดตำแหน่งข้อความ: ตรงกลาง; การขยาย: 10px 0 10px 10px;ซ้าย: 5px;

ด้านบน: 5px; -

และบล็อกที่มีรูปภาพ .b-img จะเยื้องไปทางด้านซ้าย 140 พิกเซล และตั้งค่าด้านบนเป็น 0 ปัดมุมทางด้านขวาให้เป็น 10 ยอดทันที.b-img( width:45px; line-height: 45px; padding: 20px 0 0 20px;

ซ้าย: 140px;

ด้านบน: 0;รัศมีเส้นขอบ: 0 10px 10px 0; -

และเราจะทำเช่นเดียวกันกับบล็อกด้านซ้าย

.b-demo( width:105px; line-height: 70px; text-align: center; font-size: 30px; text-transform: uppercase; padding: 0 10px 0 15px; left: 0; top: 0; z- ดัชนี: 10;

รัศมีเส้นขอบ: 10px 0 0 10px; -

จากนั้นเราจำเป็นต้องสร้างองค์ประกอบหลอกสององค์ประกอบซึ่งเป็นมุมที่อยู่ในจุดเชื่อมต่อกัน

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

.b-demo, .b-text, .b-img, .b-demo:before( ตำแหน่ง: สัมบูรณ์; )

และเราจัดตำแหน่งให้ยืนอยู่ที่ส่วนท้ายของบล็อก

B-demo:before( content: ""; width: 0; height: 0; border-top: 35px solid transparent; border-left: 10px solid #ffffff; border-bottom: 35px solid transparent; top: 0; left: 129px)โปรดทราบว่าเราจัดบล็อกทั้งหมดไปทางซ้าย ไม่ใช่ไปทางขวา เนื่องจากภาพเคลื่อนไหวจะวิ่งจากซ้ายไปขวาและนี่คือจุดสำคัญ

จากนั้นเราเลือกบล็อกถัดไปที่มีรูปภาพและกำหนด :after pseudo-element เราเขียนเนื้อหา จากนั้นตั้งค่าความกว้างและความสูงเป็นศูนย์ และใช้เส้นขอบเพื่อวาดรูปสามเหลี่ยม เราวางตำแหน่งไว้อย่างแน่นอนและจัดตำแหน่งไว้ทางซ้าย

.b-demo, .b-ข้อความ, .b-img, .b-demo:ก่อน

.b-img:after( ตำแหน่ง: สัมบูรณ์; ) .b-img:after( เนื้อหา: ""; ความกว้าง: 0; ความสูง: 0; ขอบด้านบน: 35px ทึบโปร่งใส; เส้นขอบซ้าย: 10px ทึบ #3e3f3e; เส้นขอบ -ด้านล่าง: 35px โปร่งใสด้านบน: 0; ซ้าย: 0;

เรามีกรอบปุ่มหลักพร้อมแล้ว สิ่งที่เหลืออยู่คือการทำให้เคลื่อนไหวและออกแบบให้สวยงาม

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

ปุ่ม Dws a:hover .b-demo, .dws-ปุ่ม a:hover .b-demo:before, .dws-ปุ่ม a:hover .b-text, .dws-ปุ่ม a:hover .b-img, ปุ่ม dws a:hover .b-img:หลัง ( การเปลี่ยนแปลง: 0.5 ทั้งหมด; )

เรากำหนดการเคลื่อนไหวด้วยบล็อกนี้ให้กับองค์ประกอบหลอก :ก่อนถึง 69 พิกเซล ไปทางซ้าย

ปุ่ม Dws a:hover .b-demo:before( ซ้าย: 69px; )

เราย้ายส่วนที่สองของปุ่มไปทางด้านขวาโดยระบุว่าเมื่อโฮเวอร์ให้ย้ายบล็อกไป 185 พิกเซล

ปุ่ม Dws a:hover .b-img( ซ้าย: 185px; )

จากนั้นบล็อกที่มีข้อความจะอยู่ที่ 50 รูป ดันออก เลือกและบันทึกการเคลื่อนไหวของบล็อก

ปุ่ม Dws a:hover .b-text( ซ้าย: 50px; )

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

.b-demo, .b-text, .b-img, .b-demo:before, .b-img:after( ตำแหน่ง: สัมบูรณ์;การเปลี่ยนแปลง: ทั้งหมด 1.5 วินาที; -

จากนั้นเราทำให้เอฟเฟกต์การหมุนไอคอนเคลื่อนไหวโดยใช้การแปลง 360 องศา เลือกรูปภาพและเขียนการแปลง: หมุน(360deg) ; และยังระบุความทึบ: 0.5;

เพื่อให้ภาพมีความโปร่งใสขึ้นอีกเล็กน้อย

ปุ่ม Dws a:hover img( แปลง: หมุน (360deg); ความทึบ: 0.5; )

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

B-img img( การเปลี่ยนแปลง: ทั้งหมด 1.5 วินาที; )

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

ปุ่ม Dws( ตระกูลแบบอักษร: Cuprum, Arial, Verdana, sans-serif; width: 250px; ความสูง: 70px; ระยะขอบ: 250px auto; /*โครงร่าง: 1px solid #faa21a;*/ ตำแหน่ง: สัมพันธ์; )

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

การจัดรูปแบบปุ่มใน CSS

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

B-demo, .b-img( /* Permalink - ใช้เพื่อแก้ไขและแชร์การไล่ระดับสีนี้: http://colorzilla.com/gradient-editor/#f22404+13.8e0b00+65.6d0019+100 */ พื้นหลัง: # f22404; /* เบราว์เซอร์เก่า */ พื้นหลัง: -moz-linear-gradient(-45deg, #f22404 13%, #8e0b00 65%, #6d0019 100%); /* FF3.6-15 */ พื้นหลัง: -webkit- linear- การไล่ระดับสี(-45deg, #f22404 13%,#8e0b00 65%,#6d0019 100%); /* Chrome10-25,Safari5.1-6 */ พื้นหลัง: การไล่ระดับสีเชิงเส้น (135deg, #f22404 13%,# 8e0b00 65 %,#6d0019 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ ตัวกรอง: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f22404", endColorstr="#6d0019",GradientType =1 ); /* IE6-9 ทางเลือกในการไล่ระดับสีแนวนอน */ )

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

.b-demo:before( content: ""; width: 0; height: 0; border-top: 35px solid transparent; border-left: 10px solid#7B040E; ขอบล่าง: โปร่งใสทึบ 35px;

ด้านบน: 0;

ซ้าย: 129px; -

มาเปลี่ยนสีลิงค์จากมืดเป็นสีขาวกันเถอะ ปุ่ม Dws a( การตกแต่งข้อความ: none; color: #ffffff; )

เรามาสร้างเงาให้กับข้อความกันดีกว่า เพราะเราจะเพิ่มมันเข้าไปในชั้นเรียน.b-สาธิตข้อความเงา: -1px -1px 1px #000000;

.b-demo( width:105px; line-height: 70px; text-align: center; font-size: 30px; text-transform: uppercase; padding: 0 10px 0 15px; left: 0; top: 0; z- ดัชนี: 10; รัศมีเส้นขอบ: 10px 0 0 10px;

ข้อความเงา: -1px -1px 1px #000000; - ฉันจะทำให้หน่วยในร่มเป็นสีฟ้า

.b-text( /* Permalink - ใช้เพื่อแก้ไขและแชร์การไล่ระดับสีนี้: http://colorzilla.com/gradient-editor/#b3dced+0,29b8e5+50;Custom+2 */ พื้นหลัง: #b3dced; /* เบราว์เซอร์เก่า */ พื้นหลัง: -moz-linear-gradient(45deg, #b3dced 0%, #29b8e5 50%); /* FF3.6-15 */ พื้นหลัง: -webkit-linear-gradient(45deg, #b3dced 0% ,#29b8e5 50%); /* Chrome10-25,Safari5.1-6 */ พื้นหลัง: การไล่ระดับสีเชิงเส้น (45deg, #b3dced 0%,#29b8e5 50%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+ , Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#b3dced", endColorstr="#29b8e5",GradientType=1); /* IE6-9 ทางเลือกสำรองในการไล่ระดับสีแนวนอน */

สี: #ffffff;ขนาดตัวอักษร: 24px; ความกว้าง: 150px;

มาแทนที่รูปภาพแทนที่รูปภาพสีดำด้วยรูปภาพสีขาวที่จุดเริ่มต้นของบทเรียนที่ฉันอัปโหลดสองรูปนั้นเพิ่มไอคอนที่สอง

และในขั้นตอนสุดท้าย เราจะอธิบายสไตล์เมื่อคลิกเมาส์

ฉันจะเขียนความคิดเห็นที่เกี่ยวข้องที่นี่ จากนั้นเราจะเลือกสองบล็อกที่มีคลาสหลอก :active ข้างใต้นั้น และตั้งค่าให้ส่วนผสมกลับด้านเท่านั้น

/* Animation:active */ .dws-button a:active .b-demo, .dws-button a:active .b-img( /* Permalink - ใช้เพื่อแก้ไขและแชร์การไล่ระดับสีนี้: http://colorzilla.com /gradient-editor/#f22404+13.8e0b00+49.6d0019+70 */ พื้นหลัง: #f22404; /* เบราว์เซอร์เก่า */ พื้นหลัง: -moz-linear-gradient(45deg, #f22404 13%, #8e0b00 49% , # 6d0019 70%); /* FF3.6-15 */ พื้นหลัง: -webkit-linear-gradient(45deg, #f22404 13%,#8e0b00 49%,#6d0019 70%); -การไล่ระดับสี(45deg, #f22404 13%,#8e0b00 49%,#6d0019 70%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ ตัวกรอง: progid:DXImageTransform .Microsoft.gradient(startColorstr="# f22404", endColorstr="#6d0019",GradientType=1); /* IE6-9 ทางเลือกในการไล่ระดับสีแนวนอน */ )

สำหรับบล็อกในพื้นหลัง เราจะทำการไล่ระดับสีในรูปแบบนี้ ทำมิเรอร์เท่านั้น และเพิ่มเอฟเฟกต์เงา

ปุ่ม Dws a:active .b-text( /* Permalink - ใช้เพื่อแก้ไขและแชร์การไล่ระดับสีนี้: http://colorzilla.com/gradient-editor/#b3dced+0,29b8e5+50 */ พื้นหลัง: #b3dced; /* เบราว์เซอร์เก่า */ พื้นหลัง: -moz-linear-gradient(-45deg, #b3dced 0%, #29b8e5 50%); /* FF3.6-15 */ พื้นหลัง: -webkit-linear-gradient(-45deg, #b3dced 0%,#29b8e5 50%); /* Chrome10-25,Safari5.1-6 */ พื้นหลัง: การไล่ระดับสีเชิงเส้น(135deg, #b3dced 0%,#29b8e5 50%); /* W3C, IE10+, FF16+ , Chrome26+, Opera12+, Safari7+ */ ตัวกรอง: progid:DXImageTransform.Microsoft.gradient(startColorstr="#b3dced", endColorstr="#29b8e5",GradientType=1); /* IE6-9 ทางเลือกสำรองในการไล่ระดับสีแนวนอน */ box- เงา: 0 0 3px 1px #82DCFF )

ในลักษณะสุดท้าย เมื่อคลิก เราจะระบุการหมุนของไอคอนในทิศทางตรงกันข้ามโดยมีลักษณะครบถ้วน

ปุ่ม Dws a:active img( แปลง: หมุน(0deg); ความทึบ: 1; )

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

ใครก็ตามที่ชอบเนื้อหาอย่าลืมแบ่งปันกับเพื่อนของคุณ