Skip to content

Instantly share code, notes, and snippets.

@elentras

elentras/dabblet.css

Last active December 15, 2015 18:09
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 elentras/5302158 to your computer and use it in GitHub Desktop.
Save elentras/5302158 to your computer and use it in GitHub Desktop.
Download ZIP
Untitled
Raw
dabblet.css
.grey_next_button {
float: left;
position: relative;
min-height: 30px;
line-height: 30px;
min-width: 20px;
border: solid 1px #ccc;
border-right: none;
background: #eee linear-gradient(white, #f1f1f1 37%, #e1e1e1 57%, #f6f6f6);
cursor: pointer;
padding: 0 15px;
}
.grey_next_button:after {
position: absolute;
top: 6px; right: -10px;
width: 18px;
height: 18px;
border-left: solid 1px #ccc;
border-top: solid 1px #ccc;
transform: rotate(134deg) skewX(-10deg) skewY(-10deg);
background: #eee linear-gradient(45deg, white, #f1f1f1 37%, #e1e1e1 57%, #f6f6f6);
content: '';
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div class='grey_next_button'>This is a full css3 and html flexible button (and with an arrow + gradient !)</div>
Raw
settings.json
{"view":"split-vertical","fontsize":"80","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment