文、前端小編
設計網頁的時候要怎麼達到吸引使用者但又不太複雜的效果或特效呢？簡單的按鈕hover效果不只會豐富你的網頁，還會加強你的網頁設計感。下面就來一一介紹幾個簡單的按鈕hover效果吧！
在我們開始之前， 首先要先設置好HTML頁面，將一塊div標籤的class命名為demo，且建立三個a標籤，並將其class命名為hover，在依序新增對應的data-hover屬性。
<div class ="demo">
<a href ="#" class ="hover" data-hover ="HOME">HOME</ a>
<a href ="#" class ="hover" data-hover ="NEWS">NEWS</ a>
<a href ="#" class ="hover" data-hover ="ABOUT">ABOUT</ a>
</div >
然後設定demo區塊的寬高，和給他個背景background-color，最好令他margin左右 auto置個中會讓我們在demo中看起來比較舒服。a標籤的話就讓這三個乖乖並排，做的像簡單的選單按鈕即可。因為我們要做特效，所以需要偽元素的輔助(:before，:after)。
.demo {
width : 360px;
background-color : #74cccb;
margin : 80px auto 0;
padding : 20px 10px;
text-align : center;
}
.demo a.hover {
display : inline-block;
text-decoration : none;
font-size : 18px;
font-weight : bold;
margin : 10px;
color : transparent;
position : relative;
backface-visibility : hidden;
}
.demo a.hover : before,
.demo a.hover : after, {
content : attr(data-hover);
display : none;
width : 100%;
position : absolute;
top : 0;
left : 0;
opacity : 0;
transition : 0.3s;
}
.demo a.hover : before, {
opacity : 1;
color : rgba(0,0,0,0.5);
}
呈現如下
前置作業都完成的話，我們就正式進入主題吧！
一、文字slide Up/Down
.demo a.hover : after {
color : rgba(255,255,255,0.9);
margin-top : 1em;
}
.demo a.hover : hover:before {
opacity : 0;
margin-top : -1em;
}
.demo a.hover : hover:after {
opacity : 0;
margin-top : 0;
}
結果如下
.demo a.hover : after {
color : rgba(255,255,255,0.9);
margin-top : -1em;
}
.demo a.hover : hover:before {
opacity : 0;
margin-top : 1em;
}
.demo a.hover : hover:after {
opacity : 0;
margin-top : 0;
}
結果如下
二、文字slide Left/Right
.demo a.hover : after {
color : rgba(255,255,255,0.9);
margin-left : -1em;
}
.demo a.hover : hover:before {
opacity : 0;
margin-left : 1em;
}
.demo a.hover : hover:after {
opacity : 0;
margin-left : 0;
}
結果如下
.demo a.hover : after {
color : rgba(255,255,255,0.9);
margin-left : 1em;
}
.demo a.hover : hover:before {
opacity : 0;
margin-left : -1em;
}
.demo a.hover : hover:after {
opacity : 0;
margin-left : 0;
}
結果如下
三、文字pulseIn
.demo a.hover : after {
color : rgba(255,255,255,0.9);
transform : scale(0.1);
transform : all 0.2s ease-out, transform 0.2s cubic-bezier(0.1, 1.5, 0.21, 1);
}
.demo a.hover : hover:before {
opacity : 0;
}
.demo a.hover : hover:after {
opacity : 0;
transform : scale(1);
}
結果如下
四、背景Center延伸
.demo a.hover : before {
opacity : 1;
color : rgba(0,0,0,0.5);
z-index : 1;
}
.demo a.hover : after {
background : rgba(255,255,255,0.9);
color : transparent;
top : -10%;
left : 50%;
width : 0;
height : 120%;
overflow : hidden;
}
.demo a.hover : hover:after {
opacity : 1;
left : -10%;
width : 120%;
z-index : 0;
}
結果如下
五、背景Bottom延伸
.demo a.hover : before {
opacity : 1;
color : rgba(0,0,0,0.5);
z-index : 1;
}
.demo a.hover : after {
background : rgba(255,255,255,0.9);
color : transparent;
top : auto;
bottom : -10%;
left : -10%;
width : 120%;
height : 0;
overflow : hidden;
}
.demo a.hover : hover:after {
opacity : 1;
height : 120%;
z-index : 0;
}
結果如下
六、背景Left/Right延伸
.demo a.hover : before {
opacity : 1;
color : rgba(0,0,0,0.5);
z-index : 1;
}
.demo a.hover : after {
background : rgba(255,255,255,0.9);
color : transparent;
top : -10%;
left : -10%;
width : 0;
height : 120%;
overflow : hidden;
}
.demo a.hover : hover:after {
opacity : 1;
width : 120%;
z-index : 0;
}
結果如下
.demo a.hover : before {
opacity : 1;
color : rgba(0,0,0,0.5);
z-index : 1;
}
.demo a.hover : after {
background : rgba(255,255,255,0.9);
color : transparent;
top : -10%;
right : -10%;
left : auto;
width : 0;
height : 120%;
overflow : hidden;
}
.demo a.hover : hover:after {
opacity : 1;
width : 120%;
z-index : 0;
}
結果如下
👉 一起期待下一篇文章「網頁設計教學：按鈕Hover效果(下)」吧！
zoom教室下載
