一款css實現(xiàn)的鼠標(biāo)經(jīng)過按鈕的特效

當(dāng)前位置：首頁 > 范文|應(yīng)用文 > IT技術(shù)專欄 > 腳本欄目

來源：易賢網(wǎng) 閱讀：1513 次日期：2015-03-02 11:18:12

溫馨提示：易賢網(wǎng)小編為您整理了“一款css實現(xiàn)的鼠標(biāo)經(jīng)過按鈕的特效”,方便廣大網(wǎng)友查閱！

今天要為各網(wǎng)友再帶來一款css實現(xiàn)的鼠標(biāo)經(jīng)過按鈕的特效。按鈕初始時，邊框為斷開的按鈕，當(dāng)鼠標(biāo)經(jīng)過按鈕時動畫變?yōu)榉忾]的邊框。效果圖如下：

一款css實現(xiàn)的鼠標(biāo)經(jīng)過按鈕的特效

我們一起看下實現(xiàn)的代碼：

html代碼：

代碼如下:

<body>

<a target="_blank" class="btn-edge" href=http://www.jb51.net>Hover Me</a>

</body>

css代碼：

代碼如下:

*, *:before, *:after

{

margin: 0;

padding: 0;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

body

{

padding-top: 10%;

text-align: center;

overflow-x: hidden;

}

.btn-edge

{

position: relative;

display: inline-block;

padding: 1rem 2rem;

font-family: 'Titillium Web' , sans-serif;

font-weight: 700;

text-decoration: none;

font-size: 3rem;

color: #333;

background-image: -webkit-gradient(linear, left top, left bottom, from(#333), to(#333)), -webkit-gradient(linear, left top, left bottom, from(#333), to(#333)), -webkit-gradient(linear, left top, left bottom, from(#333), to(#333)), -webkit-gradient(linear, left top, left bottom, from(#333), to(#333)), -webkit-gradient(linear, left top, left bottom, from(#333), to(#333)), -webkit-gradient(linear, left top, left bottom, from(#333), to(#333)), -webkit-gradient(linear, left top, left bottom, from(#333), to(#333)), -webkit-gradient(linear, left top, left bottom, from(#333), to(#333));

background-image: -webkit-linear-gradient(#333, #333), -webkit-linear-gradient(#333, #333), -webkit-linear-gradient(#333, #333), -webkit-linear-gradient(#333, #333), -webkit-linear-gradient(#333, #333), -webkit-linear-gradient(#333, #333), -webkit-linear-gradient(#333, #333), -webkit-linear-gradient(#333, #333);

background-image: linear-gradient(#333, #333), linear-gradient(#333, #333), linear-gradient(#333, #333), linear-gradient(#333, #333), linear-gradient(#333, #333), linear-gradient(#333, #333), linear-gradient(#333, #333), linear-gradient(#333, #333);

background-repeat: no-repeat;

-webkit-background-size: 2rem 5px, 2rem 5px, 2rem 5px, 2rem 5px, 5px 2rem, 5px 2rem, 5px 2rem, 5px 2rem;

background-size: 2rem 5px, 2rem 5px, 2rem 5px, 2rem 5px, 5px 2rem, 5px 2rem, 5px 2rem, 5px 2rem;

background-position: 0 0, 100% 0, 0 100%, 100% 100%;

-webkit-box-shadow: inset 0 0 0 5px rgba(255, 99, 71, 0);

box-shadow: inset 0 0 0 5px rgba(255, 99, 71, 0);

-webkit-transition: background-size 1s .4s, -webkit-box-shadow .4s, color .4s;

transition: background-size 1s .4s, box-shadow .4s, color .4s;

-webkit-transform: translateZ(0);

transform: translateZ(0);

}

.btn-edge:hover