Skip to content

Instantly share code, notes, and snippets.

@kizu
Created February 5, 2014 11:06
Show Gist options
  • Save kizu/8821299 to your computer and use it in GitHub Desktop.
Save kizu/8821299 to your computer and use it in GitHub Desktop.
Rounded arrow button prototype.
/* Rounded arrow button prototype. */
/* Shitty gradient, I know! */
.button {
position: relative;
display: inline-block;
padding: 1em 0 1em 1em;
margin: 100px;
font: 20px/1.5 Helvetica, Arial, sans-serif;
border-radius: 10px 0 0 10px;
background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.75));
color: #FFF;
}
.button:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
clip: rect(-10px, auto, 900px, -10px);
border-radius: inherit;
box-shadow: 0 0 0 10px rgba(0,0,0,0.15)
}
.button-arrow {
position: absolute;
left: 100%;
top: -10px;
bottom: -10px;
width: 2.95em;
overflow: hidden;
}
.button-arrow:before,
.button-arrow:after {
content: "";
position: absolute;
top: 50%;
width: 100%;
padding-bottom: 100%;
transform: translate(-50%, -50%) scale(0.8,1.0) rotate(45deg);
}
.button-arrow:before {
box-shadow: 0 0 0 10px rgba(0,0,0,0.15);
border-radius: 17px 1px;
}
.button-arrow:after {
background: linear-gradient(135deg, rgba(0,0,0,0) 8%, rgba(0,0,0,0.75) 94%, rgba(0,0,0,0) 94%) no-repeat;
border-radius: 17px 0;
}
body {
background-color: #BBB;
background-image:
repeating-linear-gradient(120deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px),
repeating-linear-gradient(60deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px),
linear-gradient(60deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1)),
linear-gradient(120deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1));
background-size: 70px 120px;
}
<a class="button">
Кнопка
<span class="button-arrow"></span>
</a>
// alert('Hello world!');
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment