effet spécial du bouton css vague d'eau-tutoriel CSS-php.cn

effet spécial du bouton css vague d'eau

韦小宝

Libérer： 2017-11-20 10:47:32

original

2801 Les gens l'ont consulté

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>

Copier après la connexion

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!