Heim >Web-Frontend >CSS-Tutorial >CSS-Wasserwellen-Button-Spezialeffekt
CSS-Wasserwellen-Button-Spezialeffekt
- 韦小宝Original
- 2017-11-20 10:47:322859Durchsuche
CSS Wasserwellen-Button-Spezialeffekt, der Quellcode wird kostenlos zur Verfügung gestellt. Schüler, die sich für CSS interessieren, können es studieren ~ Dies ist eine weitere großartige Ergänzung zu unserem CSSTechnologie Eine Verbesserung
Code:
<!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>Das Obige sind alle CSS-Wasserwellen-Button-Effekte , weitere Artikel über CSS Bitte gehen Sie zur PHP-Chinese-Website , um nach
Verwandte Empfehlungen zu suchen:
CSS, JS-Würfellotterie-Quellcode
Das obige ist der detaillierte Inhalt vonCSS-Wasserwellen-Button-Spezialeffekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：CSS3-Tipps zum Zeichnen verschiedener grundlegender GrafikenNächster Artikel：CSS3-Tipps zum Zeichnen verschiedener grundlegender Grafiken