div+css布局实现一个立体开始按钮效果代码-html代码-BFW代码库

div+css布局实现一个立体开始按钮效果代码

代码语言：html

代码描述：div+css布局实现一个立体开始按钮效果代码

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

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

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

  <meta name="viewport" content="width=device-width, initial-scale=1">

  
  
<style>
@import url("https://fonts.googleapis.com/css2?family=Rubik+Mono+One&display=swap");

:root {
  --button-width: 15rem;
  --button-height: 4rem;
  --button-bg: linear-gradient(90deg, rgb(32, 32, 53), rgb(46, 43, 89));
  --font-size: 2rem;
  --before-offset: 10px;
  --after-offset: 20px;
  --box-size: 2.5rem;
  --box-bg: linear-gradient(180deg, rgb(58, 133, 246), rgb(38, 81, 178));
  --box-animation-ease: cubic-bezier(0.46, 0.03, 0.52, 0.96);

  --outline-bg-col-one: hsla(0, 0%, 100%, 1);
  --outline-bg-col-two: hsla(306, 82%, 83%, 1);
  --outline-bg-col-three: hsla(181, 79%, 85%, 1);

  --outline-bg: linear-gradient(
    90deg,
    var(--outline-bg-col-one) 0%,
    var(--outline-bg-col-two),
    50%,
    var(--outline-bg-col-three) 100%
  );

  --outline-animation-ease: cubic-bezier(0.65, 0.05, 0.36, 1);
}

body {
  background: black;
  color: white;
  height: 100vh;
  align-content: center;
  font-size: var(--font-size);
  font-family: "Rubik Mono One", serif;
}

.rounded {
  border-radius: 99999px;
}

.ml {
  margin-left: 0.5em;
}

.box {
  align-content: center;
  text-align: center;
  width: var(--box-size);
  height: var(--box-size);
  background: var(--box-bg);
  border: 2px solid white;
  font-size: 1.75rem;
  font-family: "Helvetica", sans-serif;
}

#button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: var(--button-width);
  height: var(--button-height);
  background: var(--button-bg);
  margin: 0 auto;
}

#button:hover {
  cursor: pointer;

  & .box {
    -webkit-animation: 0.75s.........完整代码请登录后点击上方下载按钮下载查看