表白按钮神器
代码语言:html
所属分类:表白
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.extendor {
padding: 10px;
display: inline-block;
position: relative;
border-width: 2px;
margin: 6px;
min-width: 100px;
min-height: 44px;
}
.extendor, .extendor::before, .extendor::after {
transition: transform 100ms ease-in-out;
}
.extendor::before, .extendor::after {
content: '';
position: absolute;
border: 0 solid transparent;
z-index: -1;
transition-property: border-width, top, left, bottom, right;
}
.extendor::before {
top: -2px;
right: calc(100% + 2px);
bottom: -2px;
border-right-color: inherit;
}
.extendor::after {
top: calc(100% + 2px);
left: -2px;
right: -2px;
border-top-color: inherit;
}
.extendor:hover::before, .extendor:focus::befo.........完整代码请登录后点击上方下载按钮下载查看
网友评论0