LCCNET 聯成電腦

菜鳥救星

m_nav_line m_nav_line

HOT影片

m_nav_line m_nav_line

聯成電腦網頁設計教學:按鈕Hover效果(上)

icon_fb icon_twitter icon_google LINE it!
article_main_img

文、前端小編

 

 

 

設計網頁的時候要怎麼達到吸引使用者但又不太複雜的效果或特效呢?簡單的按鈕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效果(下)」吧!

 

► 推薦課程:HTML5前端語法應用JavaScript網頁特效應用Dreamweaver網頁設計

 

 

 

 

痞客邦Blog:http://lccnetvip.pixnet.net/blog
FB粉絲團:https://www.facebook.com/lccnetzone
菜鳥救星:https://www.facebook.com/greensn0w

A

本網站使用相關網站技術以確保使用者獲得最佳體驗,通過使用我們的網站,您確認並同意本網站的隱私權政策。欲了解詳情,請參閱 隱私權政策