css实现48种不同样式的按钮悬浮动画效果代码

代码语言:html

所属分类:悬停

代码描述:css实现48种不同样式的按钮悬浮动画效果代码

代码标签: css 按钮 悬浮 动画

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

<!DOCTYPE html>
<html>

<head>
   
<meta charset="UTF-8">
   
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />
   
<style>
        /* CSS Document */
       
        body {
                font-family: 'Raleway', sans-serif;  
                margin:0px;
                font-size: 15px;                        
                color: #b3b3b3;                        
                width:100%;
        }
        * {
                box-sizing:border-box;
        }
        a:-webkit-any-link {
                text-decoration:none;
        }
        .hdr{
                padding:5px;
                background-color:white;
        }
        h1 {
                color: turquoise;
                font-family: 'Raleway', sans-serif;
                font-size: 40px;
                text-shadow: 1px 2px 2px rgba(149, 150, 150, 1);
                font-weight: bold;
                letter-spacing: -1px;
                line-height: 1;
                text-align: center;
        }
        h2 {
                color: tomato;
                font-family: 'Open Sans', sans-serif;
                font-size: 20px;
                font-weight: 300;  
                text-align: center;
        }
        p {
                color: tomato;
                text-align:center;
                font-family: 'Raleway', sans-serif;
                font-size: 14px;  
                margin: 0 0 24px;  
        }
        .content-1{
            height: auto;
                width: 1430px;
        }
        .white {
                height: 200px;
                padding:70px 50px;
                background:white;
                box-shadow:0px 0.5px 6px 0 #8a8a8a;
        }
        .grey {
                height: 200px;
                padding:70px 50px;
                background:#efefef;
                box-shadow:0px 0.5px 8px 0 #8a8a8a;
        }
        section{
                width: -webkit-max-content;
                width: -moz-max-content;
                width: -o-max-content;
                width: -ms-max-content;
        }
        div{
                max-width: auto;
        }
        table{
                border-collapse: collapse;
                height: 600px;
                width: 1430px;
        }
        td{
            height: auto;
            border-style: dotted;
            text-align: center;
                padding: 50px;
                width: 1430px;
        }
        .btn-layout, .bttn {            
                display: inline-flex;
                margin: 0 5px 0 0;
            height:60px;        
            width:155px;                
                position: relative;
                opacity: 0.999;
                padding: 20px 37px;            
                text-align:center;
                border-radius:3px;              
                border: 1px solid #b3b3b3;
                -moz-transition: 0.3s;
                -ms-transition: 0.3s;
                -o-transition: 0.3s;
                -webkit-transition: 0.3s;
            transition: 0.3s;
                overflow:hidden;
        }
           
        /* CSS Document */
       
        /*------------------------------SAMPLE-1------------------------------*/
       
        .b1:hover, .b2:hover, .b3:hover, .b4:hover, .b5:hover, .b6:hover, .b7:hover, .b8:hover {
                color:white;            
        }
        /*SAMPLE-1 : BUTTON-1*/
        .b1:before{
                content: "";
                width: 100%;
                height: 0;
                border-radius: 3px;
                position: absolute;
                background-color: #2ecc71;
                left: 0;
                bottom: 0;
                transition: 0.4s;
                -webkit-transition: 0.4s;
                -moz-transition: 0.4s;
                -ms-transition: 0.4s;
                -o-transition: 0.4s;
                z-index: -1;
        }
        .b1:hover:before{
                height: 100%;
                bottom: auto;
                top: 0;
        }
        /*SAMPLE-1 : BUTTON-2*/
        .b2:before{
                content: "";
                width: 100%;
                height: 0;
                border-radius: 3px;
                position: absolute;
                background-color: #9b59b6;
                left: 0;
                top: 0;
                transition: 0.4s;
                -webkit-transition: 0.4s;
                -moz-transition: 0.4s;
                -ms-transition: 0.4s;
                -o-transition: 0.4s;
                z-index: -1;
        }
        .b2:hover:before{
                height: 100%;
                top: auto;
                bottom: 0;
        }
        /*SAMPLE-1 : BUTTON-3*/
        .b3:before{
                content: "";
                width: 0;
                height: 100%;
                position: absolute;
                background-color: #ff5722;
                right: 0;
                top: 0;
                transition: 0.4s;
                -webkit-transition: 0.4s;
                -moz-transition: 0.4s;
                -ms-transition: 0.4s;
                -o-transition: 0.4s;
                z-index: -1;
        }
        .b3:hover:before{
                width: 100%;
                right: auto;
                left: 0;
        }
        /*SAMPLE-1 : BUTTON-4*/
        .b4:before{
                content: "";
                width: 0;
                height: 100%;
                position: absolute;
                background-color: #1d8ef7;
                left: 0;
                top: 0;
                transition: 0.4s;
                -webkit-transition: 0.4s;
                -moz-transition: 0.4s;
                -ms-transition: 0.4s;
                -o-transition: 0.4s;
                z-index: -1;
        }
        .b4:hover:before{
                width: 100%;
                left: auto;
                right: 0;
        }
        /*SAMPLE-1 : BUTTON-5*/
        .b5:before{
                content: "";
                width: 0;
                height: 0;
                position: absolute;
                background-color: #2ecc71;
                left: 0;
                bottom: 0;
                transition: 0.4s;
                -webkit-transition: 0.4s;
                -moz-transition: 0.4s;
                -ms-transition: 0.4s;
                -o-transition: 0.4s;
                z-index: -1;
        }
        .b5:after{
                content: "";
                width: 0;
                height: 0;
                position: absolute;
                background-color: #2ecc71;
                right: 0;
                top: 0;
                transition: 0.4s;
                -webkit-transition: 0.4s;
                -moz-transition: 0.4s;
                -ms-transition: 0.4s;
                -o-transition: 0.4s;
                z-index: -1;
        }
        .b5:hover:before, .b5:hover:after{
                width: 50%;
                height: 100%;
        }
        /*SAMPLE-1 : BUTTON-6*/
        .b6:before{
                content: "";
                width: 0;
                height: 0;
                position: absolute;
                background-color: #9b59b6;
                left: 0;
                top: 0;
                transition: 0.4s;
                -webkit-transition: 0.4s;
                -moz-transition: 0.4s;
                -ms-transition: 0.4s;
                -o-transition: 0.4s;
                z-index: -1;
        }
        .b6:after{
                content: "";
                width: 0; height: 0;
                position: absolute;
                background-color: #9b59b6;
                right: 0;
                bottom: 0;
                transition: 0.4s;
                -webkit-transition: 0.4s;
                -moz-transition: 0.4s;
                -ms-transition: 0.4s;
                -o-transition: 0.4s;
                z-index: -1;
        }
        .b6:hover:before, .b6:hover:after{
                width: 50%;
                height: 100%;
        }
        /*SAMPLE-1 : BUTTON-7*/
        .b7:before{
                content: "";
                width: 0;
                height: 0;
                position: absolute;
                background-color: #ff5722;
                left: 50%;
                bottom: 50%;
                transition: 0.4s;
                -webkit-transition: 0.4s;
                -moz-transition: 0.4s;
                -ms-transition: 0.4s;
                -o-transition: 0.4s;
                z-index: -1;
        }
        .b7:hover:before{
                width: 100%;
                height: 100%;
                left: 0;
                bottom: 0;
        }
        /*SAMPLE-1 : BUTTON-8*/
        .btn-layout.b8:hover {
            transform: scale(1.2);
            -webkit-transform: scale(1.2);
            -moz-transform: scale(1.2);
            -ms-transform: scale(1.2);
            -o-transform: scale(1.2);
            background-color: #1d8ef7;
        }
        .btn-layout.b8:hover:after {
            width: 0%;
        }
       
       
        /*------------------------------SAMPLE-2------------------------------*/
        /*SAMPLE-2 : BUTTON-1*/
        .bt1:before{
                content: "";
                width: 100%;
                height: 0;
                position: absolute;
                background-color: #2ecc71;
                top: 50%;
                left: 0;
                transition: 0.4s;
                -moz-transition: 0.4s;
                -ms-transition: 0.4s;
                -o-transition: 0.4s;
                -webkit-transition: 0.4s;
                z-index: -1;
        }
        .bt1:after{
                content: "";
                width: 100%;
                height: 0;
                position: absolute;
                background-color: #2ecc71;
                left: 0;
                bottom: 50%;
                transition: 0.4s;
                -moz-transition: 0.4s;
                -ms-transition: 0.4s;
                -o-transition: 0.4s;
                -webkit-transition: 0.4s;
                z-index: -1;
        }
        .bt1:hover:before, .bt1:hover:after{
                height: 50%;
        }
        .bt1:hover {
            color: #fff;
        }
        /*SAMPLE-2 : BUTTON-2*/
        .bt2:before{
                content: "";
                width: 100%;
                height: 0;
                position: absolute;
                background-color: #9b59b6;
                left: 0;
                bottom: 0;
                transition: 0.4s;
                -moz-transition: 0.4s;
                -ms-transition: 0.4s;
                -o-transition: 0.4s;
                -webkit-transition: 0.4s;
                z-index: -1;
        }
        .bt2:after{
                content: "";
                width: 100%;
                height: 0;
                position: absolute;
                background-color: #9b59b6;
                right: 0;
                top: 0;
                transition: 0.4s;
                -moz-transition: 0.4s;
                -ms-transition: 0.4s;
                -o-transition: 0.4s;
                -webkit-transition: 0.4s;
                z-index: -1;
        }
        .bt2:hover:before, .bt2:hover:after{
                height: 50%;
        }
        .bt2:hover {
            color: #fff;
        }
        /*SAMPLE-2 : BUTTON-3*/
        .bt3:before{
                content: "";
                width: 0;
                height: 100%;
                position: absolute;
                background-color: #ff5722;
                left: 50%;
                top: 0;
                transition: 0.4s;
                -moz-transition: 0.4s;
                -ms-transition: 0.4s;
                -o-transition: 0.4s;
                -webkit-transition: 0.4s;
                z-index: -1;
                }
        .bt3:after{
                content: "";
                width: 0;
                height: 100%;
                position: absolute;
                background-color: #ff5722;
                right: 50%;
                top: 0;
                transition: 0.4s;
                -moz-transition: 0.4s;
                -ms-transition: 0.4s;
                -o-transition: 0.4s;
                -webkit-transition: 0.4s;
                z-index: -1;
        }
        .bt3:hover:before, .bt3:hover:after{
                width: 50%;
        }
        .bt3:hover {
            color: #fff;
        }
        /*SAMPLE-2 : BUTTON-4*/
        .bt4:before{
                content: "";
                width: 0;
                height: 100%;
                position: absolute;
                background-color: #1d8ef7;
                left: 0;
                top: 0;
                transition: 0.4s;
                -moz-transition: 0.4s;
                -ms-transition: 0.4s;
                -o-transition: 0.4s;
                -webkit-transition: 0.4s;
                z-index: -1;
        }
        .bt4:after{
                content: "";
                width: 0;
                height: 100%;
                position: absolute;
                background-color: #1d8ef7;
                right: 0;
                top: 0;
                transition: 0.4s;
                -moz-transition: 0.4s;
                -ms-transition: 0.4s;
       .........完整代码请登录后点击上方下载按钮下载查看

网友评论0