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

代码语言: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