css实现立体可按下按钮效果代码

代码语言:html

所属分类:布局界面

代码描述:css实现立体可按下按钮效果代码

代码标签: css 立体 按下 按钮

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

<html lang="en">

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

   
<style>
      body {
    width: 100%;
    height: 100vh;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    background-color: rgba(225, 225, 225, 1);
    font-family: "Inter", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow: hidden;
}

button {
    all: unset;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    position: relative;
    border-radius: 999vw;
    background-color: rgba(0, 0, 0, 0.75);
    box-shadow: -0.15em -0.15em 0.15em -0.075em rgba(5, 5, 5, 0.25.........完整代码请登录后点击上方下载按钮下载查看

网友评论0