css实现立体按钮悬浮边框动画效果代码

代码语言:html

所属分类:悬停

代码描述:css实现立体按钮悬浮边框动画效果代码

代码标签: css 立体 按钮 悬浮 边框 动画

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

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">

  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Raleway:900'>
  <style>
      .button {
	position: fixed;
	text-align: center;
	font-size: 42px;
	font-family: 'Raleway', sans-serif;
	color: hsl(220, 80%, 50%);
	width: 350px;
	height: 100px;
	margin-top: calc(50vh - 75px);
	margin-left: calc(50vw - 175px);

	border-radius: 30px;
	text-shadow: 
		0px 5px hsl(220, 80%, 30%), 
		0px 10px 10px #0003;
	box-shadow: 
		0px 0px 0px 15px hsl(330, 80%, 50%),
		0px 10px 0px 15px hsl(330, 80%, 40%),
		0px 20px 20px 15px #0003;
	cursor: pointer;.........完整代码请登录后点击上方下载按钮下载查看

网友评论0