css实现按钮悬浮border边框位移动画效果代码
代码语言:html
所属分类:悬停
代码描述:css实现按钮悬浮border边框位移动画效果代码
代码标签: css 按钮 悬浮 border 边框 位移 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { display: grid; place-content: center; min-block-size: 100vh; background: repeating-linear-gradient(-45deg, black 1rem, #111 2rem); } button { --_offset-border-size: 3px; position: relative; color: white; font-family: system-ui; font-size: 2rem; font-weight: 700; text-transform: uppercase; background-image: linear-gradient(to right, purple, rebeccapurple, blue); padding: 1rem 2rem; border: 0; border-radius: 0.25rem; } button::after { content: ""; position: absolute; inset: 0; transform: translate(1rem, 1rem); z-index: -1; background: inherit; border-radius: inherit; transition: transform 200ms; -webkit-clip-path: polygon( 0% 0%, 0% 100%, var(--_offset-border-size) 100%, var(--_offset-border-size) var(--_offset-border-size), .........完整代码请登录后点击上方下载按钮下载查看
网友评论0