recherche

Maison  >  Article  >  interface Web  >  effet spécial du bouton css vague d'eau

effet spécial du bouton css vague d'eau

韦小宝
韦小宝original
2017-11-20 10:47:322791parcourir

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

effet spécial du bouton css vague deau

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

animation d'ondulation 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

Articles Liés

Voir plus