css实现鼠标悬浮按钮背景圈圈动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：悬停

代码描述：css实现鼠标悬浮按钮背景圈圈动画效果代码

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

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
    body{
        padding: 100px;
    }

        .button {
            font: 15px Calibri, Arial, sans-serif;

            /* A semi-transparent text shadow */
            text-shadow: 1px 1px 0 rgba(255,255,255,0.4);

            /* Overriding the default underline styling of the links */
            text-decoration: none !important;
            white-space: nowrap;

            display: inline-block;
            vertical-align: baseline;
            position: relative;
            cursor: pointer;
            padding: 10px 20px;

            background-repeat: no-repeat;

            /* The following two rules are fallbacks, in case
	   the browser does not support multiple backgrounds. */

            background-position: bottom left;
            background-image: url('button_bg.png');

            /* Multiple backgrounds version. The background images
	   are defined individually in color classes */

            background-position: bottom left, top right, 0 0, 0 0;
            background-clip: border-box;

            /* Applying a default border raidus of 8px */

            -moz-border-radius: 8px;
            -webkit-border-radius: 8px;
            border-radius: 8px;

            /* A 1px highlight inside of the button */

            -moz-box-shadow: 0 0 1px #fff inset;
            -webkit-box-shadow: 0 0 1px #fff inset;
            box-shadow: 0 0 1px #fff inset;

            /* Animating the background positions with CSS3 */
            /* Currently works only in Safari/Chrome */

            -webkit-transition: background-position 1s;
            -moz-transition: background-position 1s;
            transition: background-position 1s;
        }

        .button:hover {

            /* The first rule is a fallback, in case the browser
	   does not support multiple backgrounds
	*/

            background-position: top left;
            background-position: top left, bottom right, 0 0, 0 0;
        }

        .button:active {
            /* Moving the button 1px to the bottom when clicked */
            bottom: -1px;
        }

        /* The three buttons sizes */

        .button.big		 {
            font-size: 30px;
        }
        .button.medium	 {
            font-size: 18px;
        }
        .button.small	 {
            font-size: 13px;
        }

        /* A more rounded button */

        .button.rounded {
            -moz-border-radius: 4em;
            -webkit-border-radius: 4em;
            border-radius: 4em;
        }


        /* Defining four button colors */


        /* BlueButton */

        .blue.button {
            color: #0f4b6d !important;

            border: 1px solid #84acc3 !important;

            /* A fallback background color */
            background-color: #48b5f2;

            /* Specifying a version with gradients according to */

            background-image: url('//repo.bfw.wiki/bfwrepo/images/button_bg.png'), url('//repo.bfw.wiki/bfwrepo/images/button_bg.png'),
            -moz-radial-gradient(	center bottom, circle,
            rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px),
            -moz-linear-gradient(#4fbbf7, #3faeeb);

            background-image: url('//repo.bfw.wiki/bfwrepo/images/button_bg.png'), url('//repo.bfw.wiki/bfwrepo/images/button_bg.png'),
            -webkit-gradient(	radial, 50% 100%, 0, 50% 100%, 100,
            from(rgba(89,208,244,1)), to(rgba(89,208,244,0))),
            -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4fbbf7), to(#3faeeb));
        }

        .blue.button:hover {
            background-color: #63c7fe;

            background-image: url('//repo.bfw.wiki/bfwrepo/images/button_bg.png'), url('//repo.bfw.wiki/bfwrepo/images/button_bg.png'),
            -moz-radial-gradient(	center bottom, circle,
            rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px),
            -moz-linear-gradient(#63c7fe, #58bef7);

            background-image: url('//repo.bfw.wiki/bfwrepo/images/button_bg.png'), url('button_bg.png'),
            -webkit-gradient(	radial, 50% 100%, 0, 50% 100%, 100,
            from(rgba(109,217,250,1)), to(rgba(109,217,250,0))),
            -webkit-gradient(linear, 0% 0%, 0% 100%, from(#63c7fe), to(#58bef7));
        }

        /* Green Button */

        .green.button {
            color: #345903 !important;
            border: 1px solid #96a37b !important;
            background-color: #79be1e;

            background.........完整代码请登录后点击上方下载按钮下载查看