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效果吧!

 

► 回顧 網頁設計教學:按鈕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

A

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