div+css实现立体按钮悬浮动画效果代码
代码语言:html
所属分类:悬停
代码描述:div+css实现立体按钮悬浮动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { margin: 0; height: 100vh; --color-primary-900: #141414; --color-primary-50: #fdfdfd; } .container { font-family: sans-serif; color: #3c3c3c; display: flex; align-items: center; justify-content: center; height: 100%; background-color: #1c1c1c; } .button { position: relative; z-index: 30; } button { -webkit-appearance: button; background-color: transparent; background-image: none; } .app-button { position: relative; border: 1px solid transparent; background: radial-gradient( 91.3% 1547.18% at 8.7% 50%, rgb(63, 63, 63) 0%, rgba(21, 21, 21, 0.33) 60.14%, rgb(63, 63, 63) 100% ), rgb(20, 20, 20); color: white; width: -moz-fit-content; width: fit-content; padding: 12px 22px; border-radius: 9999px; cursor: pointer; font-size: 14pt; } .app-button:hover { background: radial-gradient( 91.3% 1547.18% at 8.7% 50%, rgb(20, 20, 20) 0%, rgb(63, 63, 63) 82.81%, rgb(11, 11, 11) 100% ), rgb(63, 63, 63); transition: opacity 0.25s linear 0s; } .app-button::bef.........完整代码请登录后点击上方下载按钮下载查看
网友评论0