เอฟเฟ็คปุ่ม สวยๆ เมื่อเอา mouse hover ด้วย css

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

Moderators: mindphp, ผู้ดูแลกระดาน

abdkode
PHP Super Member
PHP Super Member
Posts: 362
Joined: 07/01/2019 9:56 am

เอฟเฟ็คปุ่ม สวยๆ เมื่อเอา mouse hover ด้วย css

Postby abdkode » 09/01/2019 5:04 pm

การมีแอฟเฟคแปลกๆสวยๆสามารถเพิ่มความน่าสนใจเว็บและไม่ให้ผู้ใช้เกิดความเบื่อ
ส่วนหนึ่งคือการสร้างเอฟเฟ็คปุ่มสวยๆ
ขั้นต้อนแรก สร้างไฟล์ index.html โดยใช้โค้ดนี้

Code: Select all

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
<div class="container">
  <button class="btn btn1">Hover Me</button>
  <button class="btn btn2">Hover Me</button>
  <button class="btn btn3">Hover Me</button>
  <button class="btn btn4">Hover Me</button>
</div>
  </body>
</html>


ต่อมาเขียน css เพื่อสร้างเอฟเฟ็คให้มัน
code css

Code: Select all

body{
  margin: 0;
  padding: 0;
}
.container{
  text-align: center;
  margin-top: 360px;
}
.btn{
  border: 1px solid #3498db;
  background: none;
  padding: 10px 20px;
  font-size: 20px;
  font-family: "montserrat";
  cursor: pointer;
  margin: 10px;
  transition: 0.8s;
  position: relative;
  overflow: hidden;
}
.btn1,.btn2{
  color: #3498db;
}
.btn3,.btn4{
  color: #fff;
}
.btn1:hover,.btn2:hover{
  color: #fff;
}
.btn3:hover,.btn4:hover{
  color: #3498db;
}
.btn::before{
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 0%;
  background: #3498db;
  z-index: -1;
  transition: 0.8s;
}
.btn1::before,.btn3::before{
  top: 0;
  border-radius: 0 0 50% 50%;
}
.btn2::before,.btn4::before{
  bottom: 0;
  border-radius: 50% 50% 0 0;
}
.btn3::before,.btn4::before{
  height: 180%;
}
.btn1:hover::before,.btn2:hover::before{
  height: 180%;
}
.btn3:hover::before,.btn4:hover::before{
  height: 0%;
}


ผลลัพธ์ที่จะได้

btn-mouse-hover.png
btn-mouse-hover.png (6.79 KiB) Viewed 1621 times


ช่องทางการศึกษาเพิ่มเติม
แนะนำ icon CSS น่ารัก ๆ
Tip CSS : การสร้าง menu Css โดยไม่ใช้ Class Bootstrap

Return to “CSS Knowledge”

Who is online

Users browsing this forum: No registered users and 7 guests