按钮悬停效果

下载代码

html

css

分享到微信朋友圈

html

css

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	height: 100vh;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #4c4177;
	background-image: linear-gradient(315deg, #4c4177 0%, #2a5470 74%);
}

.noselect {
  -webkit-touch-callout: none;
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
		-webkit-tap-highlight-color: transparent;
}

button {
	width: 150px;
	height: 50px;
	cursor: pointer;
	border: none;
	color: white;
	background-color: #1fd1f9;
	background-image: linear-gradient(315deg, #1fd1f9 0%, #b621fe 74%);
	transition: 500ms;
	position: relative;
}

button:before, button:after {
	z-index: -1;
	content: '';
	position: absolute;
	width: 75px;
	height: 0px; 
	background: transparent;
	transition: 500ms;
}

button:before {
	transform: translateX(-50px) translateY(27px);
		box-shadow: 5px 5px 16px #ca61ff;
}

button:after {
	transform: translateX(-25px) translateY(27px);
	box-shadow: -5px 5px 16px #1fd1f9;
}

button:hover:before, button:hover:after {
	height: 5px;
}

button:hover {
	box-shadow: inset 0px 5px 10px rgba(255,255,255,0.4);
}

button:focus {
	outline: none;
}

JavaScript

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg