欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

一款基于css3的动画按钮_html/css_WEB-ITnose

程序员文章站 2022-05-02 23:11:27
...
之前为大家分享了 推荐10款纯css3实现的实用按钮。今天给大家带来一款基于css3的动画按钮。实现的效果图如下:

在线预览 源码下载

实现的代码。

html代码:

 

css3代码:

  body        {            background: -webkit-linear-gradient(0deg, #FF8008 10%, #FFC837 90%);            background: linear-gradient(90deg, #FF8008 10%, #FFC837 90%);            padding: 2em;            text-align: center;        }                *        {            -moz-box-sizing: border-box;            box-sizing: border-box;        }                .share-buttons        {            position: absolute;            width: 300px;            height: 212px;            padding-left: 135px;            top: 50%;            left: 50%;            margin-left: -150px;            margin-top: -106px;        }        .share-buttons .share-button        {            float: left;            margin-top: 15px;        }        .share-buttons .share-button:first-child        {            margin-top: 0;        }        .share-buttons .share-button:after        {            clear: both;            display: table;        }                .share-button        {            display: block;            position: relative;            height: 30px;        }        .share-button:hover        {            cursor: pointer;        }        .share-button:hover .share-button-primary        {            box-shadow: 1px 0 0 0 rgba(0, 0, 0, 0.1);        }        .share-button:hover .share-button-secondary-content        {            -webkit-transform: translate3d(0, 0, 0);            transform: translate3d(0, 0, 0);        }                .share-button-primary        {            position: absolute;            background: #fff;            width: 30px;            height: 30px;            border-radius: 15px;            left: 0;            top: 50%;            margin-top: -15px;        }                .share-button-icon        {            display: block;            color: #242424;            position: absolute;            width: 30px;            line-height: 30px;            font-size: 16px;            margin-top: 1px;        }                .share-button-secondary        {            overflow: hidden;            margin-left: 15px;            height: 30px;        }                .share-button-secondary-content        {            font-family: sans-serif;            font-size: .75em;            background: #fff;            display: block;            height: 30px;            text-align: left;            padding-left: 24px;            padding-right: 18px;            line-height: 30px;            color: #242424;            border-radius: 0 15px 15px 0;            -webkit-transform: translate3d(-100%, 0, 0);            transform: translate3d(-100%, 0, 0);            -webkit-transition: -webkit-transform 175ms ease;            transition: transform 175ms ease;        }