div+css实现晶莹剔透按钮动画代码

代码语言:html

所属分类:布局界面

代码描述:div+css实现晶莹剔透按钮动画代码

代码标签: 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