div+css实现晶莹剔透按钮动画代码
代码语言:html
所属分类:布局界面
代码描述:div+css实现晶莹剔透按钮动画代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />
<style>
body{
margin:100px;
background:white;
}
.button-container {
height: 75px;
width: 260px;
}
.button {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0px;
border-top: 2px double rgba(255, 255, 255, 0.573);
border-bottom: none;
border-left: 2px outset rgba(0, 0, 0, 0.494);
border-right: 2px solid rgba(233, 79, 202, 0.7);
border-radius: 50px;
filter: hue-rotate(-15deg) drop-shadow(rgba(0, 0, 0, 0.157) 0px 30px 10px)
saturate(2);
font-family: "poppins ", sans-serif;
background: linear-gradient(
64.14deg,
rgb(59, 130, 246) 0%,
rgb(91, 142, 247) 10%,
rgb(139, 92, 246) 25%,
rgb(167, 143, 247) 40%,
rgb(184, 124, 246) 50%,
rgb(201, 111, 245) 60%,
rgb(236, 72, 153) 75%,
rgb(240, 96, 168) 85%,
rgb(234, 91, 163) 92%,
rgb(59, 130, 246) 10.........完整代码请登录后点击上方下载按钮下载查看
















网友评论0