css按钮悬浮动画效果代码
代码语言:html
所属分类:悬停
代码描述:css按钮悬浮动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html> <head> <style> @import url(https://fonts.googleapis.com/css?family=Open+Sans); *, *::before, *::after { box-sizing: border-box; } body { background-color: #1F1F1F; margin: 25px 0; } span.title { margin: 0 auto; color: #BBB; font-family: 'Open Sans', sans-serif; font-size: 0.85rem; text-align: center; display: block; } .basicBox, .swiggleBox, .checkBox { width: 130px; height: 65px; margin: 15px auto; color: #4274D3; font-family: 'Open Sans', sans-serif; font-size: 1.15rem; line-height: 65px; text-transform: uppercase; text-align: center; position: relative; cursor: pointer; } svg { position: absolute; top: 0; left: 0; } svg rect, svg path, svg polyline { fill: none; stroke: #4274D3; stroke-width: 1; } .basicBox:hover svg rect, .swiggleBox:hover svg path, .checkBox:hover svg polyline { stroke: #4274D3; } /* Basic Box */ svg rect { stroke-dasharray: 400, 0; -webkit-transition: all 0..........完整代码请登录后点击上方下载按钮下载查看
网友评论0