css3程式碼實現的滑鼠懸浮按鈕效果程式碼例項

admin發表於2017-02-17
CSSS3
在css3之前，滑鼠懸浮於按鈕之上，無非是設定按鈕的大小、字型顏色或者背景圖片等簡單的專案，但是css3的出現，可以讓設定變得豐富多彩，下面就是一個css3實現的此效果。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/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{ 
  color:tomato; 
  -webkit-background-size:100% 5px, 100% 5px, 100% 5px, 100% 5px, 5px 100%, 5px 100%, 5px 100%, 5px 100%; 
  background-size:100% 5px, 100% 5px, 100% 5px, 100% 5px, 5px 100%, 5px 100%, 5px 100%, 5px 100%; 
  -webkit-box-shadow:inset 0 0 0 5px tomato; 
  box-shadow:inset 0 0 0 5px tomato; 
  -webkit-transition:background-size 1s, -webkit-box-shadow .4s .6s, color .4s .6s; 
  transition:background-size 1s, box-shadow .4s .6s, color .4s .6s; 
} 
</style>
</head>
<body>
<a class="btn-edge" href="http://www.softwhy.com">螞蟻部落</a> 
</div>
</body>
</html>

相關文章