CSS hover創意：網頁按鈕的點擊與懸停效果

CSS hover 樣式很簡單，但是想創造出有意思、實用、有創意性的特效是很考驗設計師的創意能力，所以設計達人每隔一段時間都會分享一些與鼠標點擊、懸停的相關特效，以便大家獲得更好的創造靈感。下面一組網頁按鈕的點擊與懸停效果

空間感很強的按鈕特效

當你的鼠標在按鈕上左右晃動時，按鈕會自動帶有一些3D旋轉的空間感，看起來很有科技感啊，該按鈕使用 CSS 和 JS 實現。

源代碼

HTML:

<button class="btn btn--stripe">Button</button>
<a href="#" class="btn btn--stripe">Link</a>
<button class="btn btn--stripe btn--radius">Aggressive Radius</button>
<button class="btn btn--stripe btn--large">Large Button</button>

 

CSS(SCSS)

$color-grey: #666;
$color-black: #000;
$stripe-height: 7px;
$btn-color: $color-grey;
$btn-background: #fff;
$btn-color-hover: #fff;
$btn-background-hover: $color-grey;
$border-color: $color-grey;
$border-color-hover: $color-black;

@mixin reset-button {
overflow : visible;
margin : 0;
padding : 0;
border : 0;
background : transparent;
font : inherit;
line-height : normal;
cursor : pointer;
-moz-user-select : text;

&::-moz-focus-inner {
padding : 0;
border : 0;
}
}

@keyframes stripe-slide {
0% { background-position: 0% 0; }
100% { background-position: 100% 0; }
}

body {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
font-family: sans-serif;
}

.btn {
@include reset-button;
display: block;
text-decoration: none;
text-transform: uppercase;
padding: 16px 36px 22px;
background-color: $btn-background;
color: $btn-color;
border: 2px solid $border-color;
border-radius: 6px;
margin-bottom: 16px;
transition: all .5s ease;

&--stripe {
overflow: hidden;
position: relative;

&:after {
content: '';
display: block;
height: $stripe-height;
width: 100%;
background-image: repeating-linear-gradient(
45deg,
$border-color,
$border-color 1px,
transparent 2px,
transparent 5px
);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
border-top: 1px solid $border-color;
position: absolute;
left: 0;
bottom: 0;
background-size: $stripe-height $stripe-height;
}

&:hover {
background-color: $btn-background-hover;
color: $btn-color-hover;
border-color: $border-color-hover;

&:after {
background-image: repeating-linear-gradient(
45deg,
$btn-color-hover,
$btn-color-hover 1px,
transparent 2px,
transparent 5px
);
border-top: 1px solid $border-color-hover;
animation: stripe-slide 12s infinite linear forwards;
}
}
}

&--large {
width: 50%;
}

&--radius {
border-radius: 36px;
}
}

來源：http://www.zhihaijiangku.com