特效button demo

来源：互联网发布：mac上面菜单栏设置颜色编辑：程序博客网时间：2024/06/05 06:36

效果

这里写图片描述

思路

1.设置一个a标签

<a target="_blank" href="http://www.baidu.com">Moved</a>

2.设置伪元素before和after，并且宽度为0

 a:after {            top: 0;            left: 0;        }        a:before {            top: 0;            right: 0;        }

3.设置hover

 a:hover:after,        a:hover:before {            width: 100%;        }

4.设置动画

 transition: all 500ms;

源码

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        body, html {            width: 100%;            height: 100%;            overflow: hidden;            background: #FFF;        }        a {            width: 300px;            height: 100px;            font-size: 50px;            margin: auto;            line-height: 100px;            text-decoration: none;            position: absolute;            top: 0;            bottom: 0;            left: 0;            right: 0;            display: block;            border: solid 1px black;            text-align: center;            font-family: Arial, sans-serif;            text-transform: uppercase;            color: #666;            transition: all 500ms;            z-index: 1;        }        a:after, a:before {            display: block;            background: #333;            width: 0;            height: 100px;            content: "";            position: absolute;            transition: all 500ms;            z-index: -1;        }        a:after {            top: 0;            left: 0;        }        a:before {            top: 0;            right: 0;        }        a:hover:after,        a:hover:before {            width: 100%;        }    </style></head><body><a target="_blank" href="http://www.baidu.com">Moved</a></body></html>

参考

http://codepen.io/TryHardHusky/pen/KdQQVq

阅读全文

1 0