Maison >interface Web >tutoriel CSS >effet spécial du bouton css vague d'eau
effet spécial du bouton css vague d'eau
- 韦小宝original
- 2017-11-20 10:47:322862parcourir
css Effet spécial du bouton vague d'eau, le code source est fourni gratuitement Les étudiants intéressés par css peuvent aller l'étudier ~ C'est un autre excellent ajout à notre css technologie Une amélioration
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>Ce qui précède sont tous les effets de bouton de vague d'eau CSS , plus d'articles sur CSS Veuillez vous rendre sur le site Web chinois PHP pour rechercher
Recommandations associées :
animation de survol de la souris en CSS
code source de la loterie de dés en CSS, js
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Conseils CSS3 pour dessiner divers graphiques de baseArticle suivant：Conseils CSS3 pour dessiner divers graphiques de base