按钮动画

最新推荐文章于 2018-11-18 10:53:28 发布

大厂女程序媛

最新推荐文章于 2018-11-18 10:53:28 发布

阅读量361

点赞数

分类专栏： css3 文章标签： css3

本文链接：https://blog.csdn.net/tyutjavalily/article/details/52189615

版权

css3 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>按钮动画</title>
    <style type="text/css">
    .button {
        display: inline-block;
        padding: 20px;
        margin: 5px;
        border: none;
        font-size: 28px;
        color: #fff;
        text-align: center;
        border-radius: 4px;
        cursor: pointer;       
    }
    
    .button-hover {
        width: 200px;
        background-color: #f4511e;
         transition: all 0.5s;
    }
    
    .button-hover span {
        position: relative;
        display: inline-block;
        transition: 0.5s;
    }
    
    .button-hover span:after {
        content: "»";
        position: absolute;
        top: 0;
        right: -25px;
        transition: 0.5s;
        opacity: 0;
    }
    
    .button-hover:hover span {
        padding-right: 25px;
    }
    
    .button-hover:hover span:after {
        right: 0;
        opacity: 1
    }
    /* 添加波纹 */    
    .button-bowen {
        position: relative;
        overflow: hidden;
        background-color: #4CAF50;
        width: 200px;
         transition: all 0.5s;
    }
    
    .button-bowen:after {
        content: "";
        background: #90EE90;
        display: block;
        position: absolute;
        padding-top: 300%;
        padding-left: 250%;
        margin-left: -20px!important;
        margin-top: -120%;
        opacity: 0;
        transition: all 0.8s
    }
    
    .button:active:after {
        padding: 0;
        margin: 0;
        opacity: 1;
        transition: 0s;
    }

   /* 按压效果 */
   .button-down{
   	background-color:  #4CAF50;
   	box-shadow: 0 9px #999;
   	border-radius: 15px;
   }
   .button-down:hover{background-color: #3e8e41;}
   .button-down:active{background-color: #3e8e41;box-shadow: 0 5px #666;transform: translateY(4px);}
    </style>
</head>
<body>
    <p>鼠标移动到按钮上后添加箭头标记:</p>
    <button class="button button-hover"><span>Hover</span></button>
    <p>点击是添加波纹</p>
    <button class="button button-bowen">Click Me</button>
    <p>按钮的按压效果</p>
    <button class="button button-down">Click Me</button>
</body>

</html>


分别为：
鼠标移动到按钮上后添加箭头标记
点击是添加波纹
按钮的按压效果

大厂女程序媛

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
按钮动画

按钮动画 .button { display: inline-block; padding: 20px; margin: 5px; border: none; font-size: 28px; color: #fff; text-align: center;
复制链接

扫一扫