如何設定按鈕變形,文字不變形

如何設定按鈕變形,文字不變形

範例結果

運用CSS3之下,transform: skewX讓按鈕變成平行四邊形

狀況:滑鼠hover後,按鈕及文字都會改變

(1) html結構

<ul>
	<li><a href="">item1</a></li>
	<li><a href="">item2</a></li>
	<li><a href="">item3</a></li>
	<li><a href="">item4</a></li>
	<li><a href="">item5</a></li>
</ul>

(2) CSS3美化

ul li{  display: inline-block; margin: 10px; width: 100px; height: 50px;
	background: #F5C7C7; border-radius: 10px; border: 1px solid #020D45;
	transition: all .5s;
	}

ul li:hover{transform: skewX(-30deg);}

ul li a{ text-decoration: none; list-style:none;
		font-size: 26px; line-height: 50px; text-align: center;
		display: block; width: 100%; height: 100%;
		}

改善:利用before改善滑鼠hover後,按鈕變成平行四邊形,但文字不會變形

 

CSS3美化改善

ul li{  display: inline-block; margin: 10px; width: 100px; height: 50px;
	 position: relative;
		}

ul li:before{ content: "";
		width: 100%; height: 100%; 
		background: #F5C7C7; border-radius: 10px; border: 1px solid #020D45;
		position: absolute; left: 0; top:0; z-index: -1;
		transition: all .5s;
				}

ul li:hover:before{ transform: skewX(-30deg); }

ul li a{ text-decoration: none; list-style:none;
	font-size: 26px; line-height: 50px; text-align: center;
	display: block; width: 100%; height: 100%;
	}