css 按钮hover有光影效果

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

原创

最新推荐文章于 2024-02-26 11:56:38 发布 · 1k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#css button hover

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;
	  outline: none;
	  font-weight: 400;
	  font-size: 12px;
	  color: #ff