Hello lại là mình Thịnh DEV đây, chúc anh em buổi tối vui vẻ, Nhiều khi anh em lướt web thấy có các hover ở chữ hoặc một box content nào đó rất đẹp như kiểu ảnh dưới đây
Và anh em nghĩ rằng là code nó rất khó đúng không ? :D, dạng hover css vậy không hề khó, các bạn chỉ cần biết chút html, css3 thôi. Để em hiểu mình sẽ chia sẻ cách CSS Hover Effects cho một box DIV như trên nhé.
Nào chúng ta cùng bắt đầu thôi 😀
Đầu tiên anh em hãy khai báo HTML như sau:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>CSS Hover Effects</title>
</head>
<body>
<div class=”hove-box”>
<p>Nội dung chúng ta cần điền tại đây, để làm demo chúc các bạn học tốt front-end có nhiều ý tưởng thiết kế web tuyệt vời hơn nữa, quan trọng là kếm được nhiều tiền. Trong lập trình có nhiều cái hay lắm</p>
</div>
</body>
</html>
Và chúng ta bắt đầu CSS cho nó như sau:
body
{
margin: 0;
padding: 0;
}
.hove-box
{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 300px;
height: 300px;
border-radius: 50%;
box-shadow: 0 0 0 15px #f40367;
background: #fff;
box-sizing: border-box;
text-align: center;
transition: .5s;
}
.hove-box:hover
{
border-radius: 0;
}
.hove-box:before
{
content: ”;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #f40367;
z-index: -1;
transform: rotate(-45deg);
border-radius: 10px;
}
.hove-box p
{
margin: 0;
padding: 0;
color: #fff;
font-size: 16px;
padding: 20px;
font-family: sans-serif;
box-sizing: border-box;
position: absolute;
top: 50%;
transform: translateY(-50%);
transition: .5s;
}
.hove-box:hover p
{
box-shadow: 0 0 50px rgba(0,0,0,.5);
}