css实现可按下逼真圆形按钮效果代码
代码语言:html
所属分类:布局界面
代码描述:css实现可按下逼真圆形按钮效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link href="https://fonts.googleapis.com/css2?family=Itim&family=Nunito:wght@900&display=swap" rel="stylesheet"> <style> html, body, form, button { display: grid; } html { height: 100%; } body { background: #2c2c2c; } svg { position: absolute; } form { grid-gap: 0.5em; grid-template-columns: repeat(2, max-content); place-self: center; position: relative; padding: 0.5em; color: #121212; font: clamp(1.25rem, 10vmin, 7.5rem)/3 nunito; filter: drop-shadow(0.125em 0.25em 0.125em #121212); } form:before { position: absolute; z-index: -1; inset: 0; border-radius: 1em; box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.5), inset 0 0.125em 0.125em -0.125em rgba(255, 255, 255, 0.5); background: #232323; filter: url(#grainy); content: ""; } button { border: none; padding: 0.1875em 0.25em 0.3125em; border-radius: 50%; box-shadow: inset 0 0 0.1875em hsla(25, 100%, 65%, calc(var(--light, 0)*.65)), inset 0 0.1875em 1px #161616, 0 0.0625em 0.1875em rgba(255, 255, 255, 0.1), 0.125em 0.125em 0.25em rgba(0, 0, 0, 0.125), 0 0.0625em 0.375em rgba(0, 0, 0, 0.1875); background: radial-gradient(circle 1.5em at 50% calc(100% - .5*3em), #101010 100%, transparent) #090909; font: inherit; text-transform: uppercase; transition: box-shadow 0.35s ease-out; cursor: pointer; } button:focus { outline: none; } button:hover, button:focus { --light: 1 ; } button:active { --press: 1 ; } button::before, button::after { grid-area: 1/1; z-index: 1; width: 3em; height: 3em; border-radius: inherit; transform: translatey(calc(var(--press, 0)*.25*0.25em)); transition: transform 0.25s ease-out; } button::before { box-shadow: inset 0 0.125em 0.125em -0.125em rgba(255, 255, 255, 0.5), inset 0 3em 0.125em -2.25em currentcolor, inset 0 3em 0.25em -2.25em currentcolor, inset 0 3em 0.375em -2.25em currentcolor, inset 0 3em 0.5em -2.25em currentcolor, inset 0 3em 0.625em -2.25em currentcolor, inset 0 3em 0.75em -2.25em currentcolor, inset 0 3em 0.875em -2.25em currentcolor, inset 0 3em 1em -2.25em currentcolor; background: linear-gradient(currentcolor 15%, transparent 65%), radial-gradient(circle 1.3125em, #3e3e3e 100%, currentcolor); color: #313131; filter: url(#grainy) drop-shadow(0 0 #000); content: ""; } button::after { .........完整代码请登录后点击上方下载按钮下载查看
网友评论0