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