hover.css一百多种按钮悬浮动画效果代码集合-html代码-BFW代码库

代码语言：html

所属分类：悬停

代码描述：hover.css一百多种按钮悬浮动画效果代码集合

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="zh">

<head>

    <meta charset="utf-8">

    <title></title>
    <style>

@import url(https://fonts.googleapis.com/css?family=Roboto);

        body {
            margin: 0 auto;
            max-width: 800px;
            padding: 40px 20px 20px 20px;
            font-family: sans-serif;
            color: #333;
            line-height: 140%;
        }

        .browsehappy {
            position: absolute;
            top: 0;
            right: 0;
            left: 0;
            padding: 1em;
            background: black;
            color: white;
            text-align: center;
        }

        img {
            border: none;
        }

        small {
            display: block;
        }

        p,
        [class^="hvr-"] {
            font-family: 'Roboto', sans-serif;
        }

        [class^="hvr-"] {
            /*display: inline-block;*/
            /*vertical-align: middle;*/
            margin: .4em;
            padding: 1em;
            cursor: pointer;
            background: #e1e1e1;
            text-decoration: none;
            color: #666;
            /* Prevent highlight colour when element is tapped */
            -webkit-tap-highlight-color: rgba(0,0,0,0);
        }

        .aligncenter {
            text-align: center;
        }

        .sup {
            vertical-align: super;
            margin-left: -1em;
            padding: .21875em;
            line-height: 100%;
            font-size: .21875em;
            border: #eee solid 1px;
            border-radius: 4px;
            color: inherit;
        }

        .sup:hover {
            background: #eee;
        }

        a {
            color: #2098D1;
            text-decoration: none;
        }

        .footer a:hover,
        .tutorial:hover {
            color: #207AD1;
        }

        .tutorial {
            display: inline-block;
            font-size: .8em;
            font-weight: bold;
        }

        .tutorial:hover,
        .tutorial:focus,
        .tutorial:active {
            text-decoration: none;
        }

        .intro {
            max-width: 680px;
            margin: 20px auto 0 auto;
        }

        .button.cta {
            display: inline-block;
            position: relative;
            margin: 1.2em 0 1em 0;
            padding: 1em;
            background: #2098D1;
            border: none;
            text-decoration: none;
            font-weight: 700;
            color: white;
        }

        .effects {
            margin-top: 6em;
        }

        h1 {
            text-align: center;
            font-size: 4em;
        }

        h2 {
            margin-top: 2em;
        }

        .about {
            border-top: #333 solid 2px;
            border-bottom: #333 solid 2px;
        }

        .footer {
            overflow: hidden;
            width: auto;
            margin-top: 6em;
            font-size: .9em;
        }

        .footer a {
            text-decoration: none;
        }

        .credit {
            font-size: .8em;
            font-weight: normal;
        }

        .social {
            margin-top: 2.6em;
        }

        .social-button {
            display: inline-block;
            vertical-align: middle;
        }

        .twitter-follow-button {
            display: block;
            margin: 0 auto;
        }

        .follow {
            margin-bottom: 20px;
            line-height: 200%;
        }

        .author {
            margin: 6em auto 0 auto;
            text-align: center;
            font-weight: 900;
        }

        .author [class^="hvr-"] {
            background: transparent;
        }

        .author .logo {
            display: block;
            margin-bottom: .8em;
        }

        #forkongithub {
            display: none;
        }

        #forkongithub a {
            background: #000;
            color: #fff;
            text-decoration: none;
            font-family: arial, sans-serif;
            text-align: center;
            font-weight: bold;
            padding: 5px 40px;
            font-size: 1rem;
            line-height: 2rem;
            position: relative;
            -webkit-transition: 0.5s;
            transition: 0.5s;
        }

        #forkongithub a:hover,
        #forkongithub a:focus,
        #forkongithub a:active {
            background: #2098D1;
            color: #fff;
        }

        #forkongithub a::before,
        #forkongithub a::after {
            content: "";
            width: 100%;
            display: block;
            position: absolute;
            top: 1px;
            left: 0;
            height: 1px;
            background: #fff;
        }

        #forkongithub a::after {
            bottom: 1px;
            top: auto;
        }

@media screen and (min-width: 640px) {
            #forkongithub {
                position: absolute;
                display: block;
                top: 0;
                right: 0;
                width: 200px;
                overflow: hidden;
                height: 200px;
            }

            #forkongithub a {
                width: 200px;
                position: absolute;
                top: 60px;
                right: -60px;
                -webkit-transform: rotate(45deg);
                -ms-transform: rotate(45deg);
                transform: rotate(45deg);
                box-shadow: 4px 4px 10px rgba(0,0,0,0.8);
            }
        }

    </style>

    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/hover.css">

    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">

</head>

<body>



    <h1>Hover.css</h1>



    <p class="intro">
        A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS, SASS, and LESS.
    </p>





    <div class="effects">



        <h2>2D Transitions</h2>



        <a href="#" class="hvr-grow">Grow</a>

        <a href="#" class="hvr-shrink">Shrink</a>

        <a href="#" class="hvr-pulse">Pulse</a>

        <a href="#" class="hvr-pulse-grow">Pulse Grow</a>

        <a href="#" class="hvr-pulse-shrink">Pulse Shrink</a>

        <a href="#" class="hvr-push">Push</a>

        <a href="#" class="hvr-pop">Pop</a>

        <a href="#" class="hvr-bounce-in">Bounce In</a>

        <a href="#" class="hvr-bounce-out">Bounce Out</a>

        <a href="#" class="hvr-rotate">Rotate</a>

        <a href="#" class="hvr-grow-rotate">Grow Rotate</a>

        <a href="#" class="hvr-float">Float</a>

        <a href="#" class="hvr-sink">Sink</a>

        <a href="#" class="hvr-bob">Bob</a>

        <a href="#" class="hvr-hang">Hang</a>

        <a href="#" class="hvr-skew">Skew</a>

        <a href="#" class="hvr-skew-forward">Skew Forward</a>

        <a href="#" class="hvr-skew-backward">Skew Backward</a>

        <a href="#" class="hvr-wobble-horizontal">Wobble Horizontal</a>

        <a href="#" class="hvr-wobble-vertical">Wobble Vertical</a>

        <a href="#" class="hvr-wobble-to-bottom-right">Wobble To Bottom Right</a>

        <a href="#" class="hvr-wobble-to-top-right">Wobble To Top Right</a>

        <a href="#" class="hvr-wobble-top">Wobble Top</a>

        <a href="#" class="hvr-wobble-bottom">Wobble Bottom</a>

        <a href="#" class="hvr-wobble-skew">Wobble Skew</a>

        <a href="#" class="hvr-buzz">Buzz</a>

        <a href="#" class="hvr-buzz-out">Buzz Out</a>





        <h2>Background Transitions</h2>



        <a href="#" class="hvr-fade&qu.........完整代码请登录后点击上方下载按钮下载查看