CSS 물결 버튼 특수 효과
- 韦小宝원래의
- 2017-11-20 10:47:322805검색
css물결 버튼 특수 효과, 소스 코드가 무료로 제공됩니다. css에 관심이 있는 학생들은 공부할 수 있습니다~ 이것은 우리 csstechnology
코드:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>PHP中文网</title>
<style>
a{
text-decoration:none;
user-select:none;
position: relative;
display: block;
margin: 100px auto;
width:120px;
height:50px;
line-height:50px;
text-align:center;
border-radius:25px;
color:#fff;
font-size:16px;
cursor:pointer;
background-color: #ff8300;
box-shadow: 0 3px 9px 0 rgba(255, 131, 0, 0.35);
overflow: hidden;
}
a:after{
position: absolute;
content: "";
display: block;
margin: auto;
left: -40px;
top:-75px;
width: 200px;
height: 200px;
background: #ff8300;
border-radius: 50%;
opacity: 0;
transition: all 0.8s;
}
a:hover{
background-color: #FF9D00;
top:-2px;
box-shadow: 0 5px 13px 0 rgba(255, 131, 0, 0.59);
}
a:active{
background-color: #ff8300;
top:0;
box-shadow: 0 3px 9px 0 rgba(255, 131, 0, 0.35);
}
a:active:after{
width: 0;
height: 0;
left:60px;
top: 25px;
opacity: 1;
transition-duration: 0s;
}
</style>
</head>
<body>
<a href="javascript:void(0)">PHP中文网</a>
</body>
</html>의 또 다른 개선 사항입니다. 위 내용은 모두 CSS 물결 버튼 효과입니다. CSS에 대한 더 많은 기사를 보려면 PHP 중국어 웹사이트검색
관련 권장 사항:
위 내용은 CSS 물결 버튼 특수 효과의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.