聯成電腦網頁設計教學：按鈕Hover效果(下)
文、前端小編
設計網頁的時候要怎麼達到吸引使用者但又不太複雜的效果或特效呢？簡單的按鈕hover效果不只會豐富你的網頁，還會加強你的網頁設計感。下面就來一一介紹幾個簡單的按鈕hover效果吧！
► 回顧 網頁設計教學：按鈕Hover效果(上)
七、文字zoom In/Out
.demo a.hover : before {
opacity : 1;
color : rgba(0,0,0,0.5);
}
.demo a.hover : after {
background : rgba(255,255,255,0.9);
transform : scale(1.5);
}
.demo a.hover : hover:before {
opacity : 0;
}
.demo a.hover : hover:after {
opacity : 1;
transform : scale(1);
}
結果如下
.demo a.hover : after {
background : rgba(255,255,255,0.9);
transform : scale(0.1);
}
.demo a.hover : hover:before {
opacity : 0;
}
.demo a.hover : hover:after {
opacity : 1;
transform : scale(1);
}
結果如下
八、外框填滿
.demo a.hover {
display : inline-block;
text-decoration : none;
font-size : 18px;
font-weight : bold;
box-shadow : inset 0px 0px 0px 0px rgba(0, 0, 0, 0.5);
border : solid 2px rgba(0, 0, 0, 0.5);
padding : 6px 10px;
margin : 10px;
color : rgba(0, 0, 0, 0.5);
position : relative;
backface-visibility : hidden;
transition : 0.3s;
}
.demo a.hover : before,
.demo a.hover : after {
display : none;
}
.demo a.hover : hover {
box-shadow : inset 0px 0px 1px 20px rgba(0, 0, 0, 0.5);
color : rgba(255,255,255,0.9);
}
結果如下
九、邊框center背景填滿
.demo a.hover {
display : inline-block;
text-decoration : none;
font-size : 18px;
font-weight : bold;
border : solid 2px rgba(0, 0, 0, 0.5);
padding : 6px 10px;
margin : 10px;
color : rgba(0, 0, 0, 0.5);
position : relative;
backface-visibility : hidden;
transition : 0.3s;
}
.demo a.hover : before {
color : rgba(0, 0, 0, 0.5);
line-height : 200%;
z-index : 2;
}
.demo a.hover : after {
content : ;
width : 0;
height : 100%;
left : 50%;
color : transparent;
background : rgba(0, 0, 0, 0.5);
z-index : 1;
}
.demo a.hover : hover:before {
color : rgba(255,255,255,0.9);
}
.demo a.hover : hover:after {
width : 100%;
left : 0;
}
結果如下
十、邊框center背景旋轉延伸
.demo a.hover : after {
content : ;
width : 0;
height : 100%;
left : 50%;
color : transparent;
background : rgba(0, 0, 0, 0.5);
transform : skew(0deg);
z-index : 1;
}
.demo a.hover : hover:before {
color : rgba(255,255,255,0.9);
}
.demo a.hover : hover:after {
width : 100%;
left : 0;
transform : skew(45deg);
}
結果如下
十一、邊框Left/Right背景填滿
.demo a.hover : after {
content : ;
height : 100%;
left : -100%;
color : transparent;
background : rgba(0, 0, 0, 0.5);
z-index : 1;
}
.demo a.hover : hover:before {
color : rgba(255,255,255,0.9);
}
.demo a.hover : hover:after {
left : 0;
}
結果如下
.demo a.hover : after {
content : ;
height : 100%;
left : auto;
right : 100%;
color : transparent;
background : rgba(0, 0, 0, 0.5);
z-index : 1;
}
.demo a.hover : hover:before {
color : rgba(255,255,255,0.9);
}
.demo a.hover : hover:after {
right : 0;
}
結果如下
十二、邊框背景slide Up/Down
.demo a.hover : before {
color : rgba(0, 0, 0, 0.5);
}
.demo a.hover : after {
height : 100%;
top : 100%;
color : rgba(255, 255, 255, 0.9);
background : rgba(0, 0, 0, 0.5);
}
.demo a.hover : hover:before {
opacity : 0;
}
.demo a.hover : hover:after {
top : 0;
}
結果如下
.demo a.hover : before {
color : rgba(0, 0, 0, 0.5);
}
.demo a.hover : after {
height : 100%;
top : -100%;
color : rgba(255, 255, 255, 0.9);
background : rgba(0, 0, 0, 0.5);
}
.demo a.hover : hover:before {
opacity : 0;
}
.demo a.hover : hover:after {
top : 0;
}
結果如下
十三、邊框背景slide Left/Right
.demo a.hover : before {
color : rgba(0, 0, 0, 0.5);
}
.demo a.hover : after {
height : 100%;
left : -100%;
color : rgba(255, 255, 255, 0.9);
background : rgba(0, 0, 0, 0.5);
}
.demo a.hover : hover:before {
opacity : 0;
}
.demo a.hover : hover:after {
left : 0;
}
結果如下
.demo a.hover : before {
color : rgba(0, 0, 0, 0.5);
}
.demo a.hover : after {
height : 100%;
left : 100%;
color : rgba(255, 255, 255, 0.9);
background : rgba(0, 0, 0, 0.5);
}
.demo a.hover : hover:before {
opacity : 0;
}
.demo a.hover : hover:after {
left : 0;
}
結果如下
文章來源參考
► 推薦課程：HTML5前端語法應用、JavaScript網頁特效應用、Dreamweaver網頁設計
痞客邦Blog：http://lccnetvip.pixnet.net/blog
FB粉絲團：https://www.facebook.com/lccnetzone
菜鳥救星：https://www.facebook.com/greensn0w
