css实现漂亮的鼠标悬浮点击按钮效果代码-html代码-BFW代码库

css实现漂亮的鼠标悬浮点击按钮效果代码

代码语言：html

所属分类：悬停

代码描述：css实现漂亮的鼠标悬浮点击按钮效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
    @import url('https://fonts.googleapis.com/css2?family=Raleway:wght@700&display=swap');
	:root {
	--global-c:hsl(0,0%,90%);
	--global-bg:hsl(210,25%,10%)
}
body {
	color:var(--global-c);
	background:var(--global-bg);
	font-family:Raleway;
	min-height:100vh;
	margin:0;
	padding:20px;
	box-sizing:border-box;
	display:-webkit-box;
	display:flex;
	-webkit-box-orient:vertical;
	-webkit-box-direction:normal;
	flex-direction:column;
	-webkit-box-align:center;
	align-items:center
}
.meta {
	padding-top:5vh
}
.meta,main {
	padding-bottom:calc(100px+5vh);
	text-align:center
}
button {
	display:inline-block;
	border:0;
	border-radius:100px;
	margin:20px 20px 80px;
	padding:4px;
	font-size:1.5rem;
	font-weight:bold;
	text-transform:uppercase;
	letter-spacing:2px;
	background:-webkit-gradient(linear,left top,right bottom,from(var(--bg)));
	background:linear-gradient(to right bottom,var(--bg));
	position:relative;
	cursor:pointer
}
button:before {
	content:'';
	width:1em;
	height:1em;
	border-radius:1em;
	display:inline-block;
	background:-webkit-gradient(linear,left top,right bottom,from(var(--bg)));
	background:linear-gradient(to right bottom,var(--bg));
	position:absolute;
	top:200%;
	left:-10%;
	-webkit-transform:translate(-50%,-50%);
	transform:translate(-50%,-50%);
	pointer-events:none
}
button:nth-child(2n)::before {
	top:-100%;
	left:100%;
	opacity:.8;
	width:.5em;
	height:.5em
}
span {
	display:inherit;
	borde.........完整代码请登录后点击上方下载按钮下载查看