css实现按钮悬浮渐变边框动画效果代码
代码语言:html
所属分类:悬停
代码描述:css实现按钮悬浮渐变边框动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { margin: 0; padding: 0; box-sizing: border-box; } html, body { display: grid; height: 100%; place-items: center; background: #000; } .center { display: flex; text-align: center; align-items: center; justify-content: center; } .outer { position: relative; margin: 0 50px; background: #111; } .button { height: 70px; width: 220px; border-radius: 50px; } .circle { height: 200px; width: 200px; border-radius: 50%; } .outer button, .outer span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .outer button { background: #111; color: #f2f2f2; outline: none; border: none; font-size: 20px; z-index: 9; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; } .button button { height: 60px; width: 210px; border-radius: 50px; } .circle button { height: 180px; width: 180px; border-radius: 50%; } .outer span { height: 10.........完整代码请登录后点击上方下载按钮下载查看
网友评论0