按钮特效(笔记)

案例

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>button</title>
    <link rel="stylesheet" href="D:\HTML\button\css\style.css">
</head>
<body>
<div class="box">
    <div class="link link-miss">
        <span class="icon"></span>
        <a href="#" class="button">
            <span class="line top"></span>
            <span class="line right"></span>
            <span class="line bottom"></span>
            <span class="line left"></span>
        MISSION</a>
    </div>
    <div class="link link-play">
        <span class="icon"></span>
        <a href="#" class="button">
            <span class="line top"></span>
            <span class="line right"></span>
            <span class="line bottom"></span>
            <span class="line left"></span>
        PLAY</a>
    </div>
    <div class="link link-touch">
        <span class="icon"></span>
        <a href="#" class="button">
            <span class="line top"></span>
            <span class="line right"></span>
            <span class="line bottom"></span>
            <span class="line left"></span>
        MISSION</a>
    </div>
</div>  
</body>
</html>

CSS代码

*{ margin: 0; padding: 0; }
body{ background: #333; }
.box{ width: 800px; height: 280px; margin: 50px auto; }
.box .link{ width: 205px; height: 280px; float: left; margin: 0 20px; }
.link .icon{ display: inline-block; width: 100%; height: 190px; transition:all 0.2s ease-out; }
.link-miss .icon{ background: url() no-repeat center center; }
.link-play .icon{ background: url() no-repeat center center; }
.link-touch .icon{ background: url() no-repeat center center; }
.link .icon:hover{ -webkit-transform:rotate(360deg) scale(1.2); }
.button{ display: block; width: 180px; height: 50px; position: relative; line-height: 50px; text-decoration: none; color: #2DCB70; font-family: Arial; font-weight: bolder; border:2px solid rgba(255,255,255,0.8); padding-left: 20px; margin: 0 auto; background: url() no-repeat 130px center; }
.button:hover{ border: 2px solid rgba(255,255,255,1); background-position: 140px center; transition:0.4s ease; }
.button .line{ display: block; position: absolute; background: none; transition:0.4s ease; }
.button:hover .line{ background: #fff; }
.button .line-top{ height: 2px; width: 0px; left: -110px; top: -2px; }
.button:hover .line-top{ width: 100%; left: -2px; }
.button .line-right{ width: 2px; height: 0px; right: -2px; top: -110%; }
.button:hover .line-right{ height: 100%; top:-2px; }
.button .line-bottom{ width: 2px; height: 0px; left: -2px; bottom: -110%; }
.button:hover .line-bottom{ height: 100%; bottom: -2px; }
.button .line-left{ width: 0px; height: 2px; right: -110%; bottom: -2px; }
.button:hover .line-left{ width: 100%; right: -2px; }

传统input标签

可直接在按钮中贴背景图。但是用CSS给input标签贴图,只能做宽高固定死的,不能做任意长度。

a标签

没有默认事件。
可以用CSS模拟成按钮外观,并做到宽度自适应。
可以增加上交互效果,且浏览器均兼容。

你可能感兴趣的:(按钮特效)