250x250
Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
Tags
- iPhone
- 비전공자
- 비전공 개발자
- iOS 개발자
- jQuery
- front-end
- 프론트엔드
- javascript
- xcode
- html5
- 풀스택
- CSS
- ipad
- hover
- php
- MAC
- effect
- IOS
- css3
- react
- button
- HTML
- keyframes
- 자바스크립트
- Animation
- 개발자
- 백엔드
- image
- SWIFT
- 애니메이션
Archives
- Today
- Total
비전공자 개발일기
Wave BG Button 본문
728x90
SMALL
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>WAVE BG BTN</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<a href="#">
<span>Button</span>
<div class="liquid"></div>
</a>
</body>
</html>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #0C0C0C;
}
a {
position: relative;
padding: 20px 50px;
display: block;
text-decoration: none;
text-transform: uppercase;
width: 200px;
overflow: hidden;
border-radius: 40px;
}
a span {
position: relative;
color: #FFF;
font-size: 20px;
font-family: Arial, Helvetica, sans-serif;
letter-spacing: 8px;
z-index: 1;
}
a .liquid {
position: absolute;
top: -80px;
left: 0;
width: 200px;
height: 200px;
background-color: #4973FF;
box-shadow: inset 0 0 50px rgba(0, 0, 0, .5);
transition: .5s;
}
a .liquid::before, a .liquid::after {
content: '';
width: 200%;
height: 200%;
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, -75%);
background-color: #000;
}
a .liquid::before {
border-radius: 45%;
background-color: rgba(20, 20, 20, 1);
animation: animate 5s linear infinite;
}
a .liquid::after {
border-radius: 40%;
background-color: rgba(20, 20, 20, .5);
animation: animate 10s linear infinite;
}
a:hover .liquid {
top: -120px;
}
@keyframes animate {
0% {
transform: translate(-50%, -75%) rotate(0deg);
}
100% {
transform: translate(-50%, -75%) rotate(360deg);
}
}
728x90
LIST
'HTML _CSS' 카테고리의 다른 글
Mario Matching Game (0) | 2022.09.06 |
---|---|
Oxygen (0) | 2022.09.05 |
Tabs Using (0) | 2022.09.03 |
Lighting Loader (0) | 2022.09.02 |
Emotion Animation (0) | 2022.09.01 |