css 按钮hover有光影效果

最新推荐文章于 2024-02-26 11:56:38 发布

Bonjours

最新推荐文章于 2024-02-26 11:56:38 发布

阅读量969

点赞数

分类专栏：前端 css 文章标签： css button hover

本文链接：https://blog.youkuaiyun.com/Bonjours/article/details/103663690

版权

html:

<!-- 带背景纹理的区域 -->
	<div class="bgpattern">
		<div class="bgpattern_bg"></div>
		<div class="">https://gravit.io/</div>
	</div>

	<!-- 光影划过 -->
	https://codepen.io/andreasstorm/pen/gofFm
	<div class="cntr">
	  <button>SUBMIT</button>
	</div>

css：

/*纹理区域*/
	.bgpattern{ background: linear-gradient(#6ab2fb,#0b81ff); background: -webkit-linear-gradient(#6ab2fb,#0b81ff); position: relative; min-height: 500px; color: #fff}
	/*.bgpattern_bg{ position: absolute; background: url(img/techpattern.png) repeat; width: 100%; height: 100%; background-size: 56px auto}*/


	/*光影划过*/
	body{ font-family: 'Lato', sans-serif }
  	
  
	button{
	  position: relative;
	  background: #000;
	  border: 0;
	  padding: 14px 42px;
	  border-radius: 3px;
	  cursor: pointer;
	  overflow: hidden;
	  outlin