按钮悬浮边框填色动画效果代码
代码语言:html
所属分类:悬停
代码描述:按钮悬浮边框填色动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url(https://fonts.googleapis.com/css?family=Lato); body { display: flex; height: 100vh; justify-content: center; align-items: center; text-align: center; background: #1A1E23; } .btn { --hue: 190; --ease-in-duration: 0.25s; --ease-in-exponential: cubic-bezier(0.95, 0.05, 0.795, 0.035); --ease-out-duration: 0.65s; --ease-out-delay: var(--ease-in-duration); --ease-out-exponential: cubic-bezier(0.19, 1, 0.22, 1); position: relative; padding: 1rem 3rem; font-size: 1rem; line-height: 1.5; color: white; text-decoration: none; background-color: hsl(var(--hue), 100%, 41%); border: 1px solid hsl(var(--hue),.........完整代码请登录后点击上方下载按钮下载查看
网友评论0