Skip to content

Instantly share code, notes, and snippets.

@ShikiSuen

ShikiSuen/gist:3084edbe2dfe8df9030ccf7a4a01cb70

Last active November 26, 2019 13:28
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ShikiSuen/3084edbe2dfe8df9030ccf7a4a01cb70 to your computer and use it in GitHub Desktop.
Save ShikiSuen/3084edbe2dfe8df9030ccf7a4a01cb70 to your computer and use it in GitHub Desktop.
Download ZIP
CSS 重现 NewvBB 留爱清爽风格的发帖按钮
Raw
gistfile1.txt
<!DOCTYPE html>
<html lang="zh-Hans-CN">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Web Page Design</title>
<head>
<style type="text/css">
.vbbutton_big {
text-align: center;
color:#666666;
position: relative;
background: #FFFFFF;
border: 1px solid #666666;
height:16px;
width: 62px;
height: 16px;
box-shadow: inset 0em 3px #89B7F0, inset 0em 4px #666666;
font: 12px Tahoma, -apple-system, system-ui, "PingFang SC", sans-serif;
letter-spacing: 1px;
padding: 5px 6px 3px 6px;
clip-path:
polygon(
0% 0px, /* top left */
0px 0%, /* top left */
calc(100% - 7px) 0%, /* top right */
100% 7px, /* top right */
100% calc(100%), /* bottom right */
calc(100%) 100%, /* bottom right */
0px 100%, /* bottom left */
0 calc(100%) /* bottom left */
);
-webkit-clip-path:
polygon(
0% 0px, /* top left */
0px 0%, /* top left */
calc(100% - 7px) 0%, /* top right */
100% 7px, /* top right */
100% calc(100%), /* bottom right */
calc(100%) 100%, /* bottom right */
0px 100%, /* bottom left */
0 calc(100%) /* bottom left */
);
}
.vbbutton_big:after, .vbbutton_big:before {
-ms-transform:rotate(-135deg);
-webkit-transform:rotate(-135deg);
transform:rotate(-135deg);
bottom: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
top:0px;
right:0px;
}
.vbbutton_big:after {
border-color: rgba(200, 265, 0, 0);
border-bottom-color: #FFFFFF;
border-width: 4px;
left: 100%;
top:2px;
margin-left: -10px;
}
.vbbutton_big:before {
border-color: rgba(194, 225, 245, 0);
border-bottom-color: #666666;
border-width: 7px;
left: 100%;
top:0px;
margin-left: -14px;
}
.vbbutton_big:hover {
}
.span-link {
position:absolute;
width:100%;
height:100%;
top:0;
left: 0;
z-index: 9999;
}
</style>
</head>
<body>
<div class="vbbutton_big"><a href="http://www.apple.com/"><span class="span-link"></span></a>发新主題</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment