Created
February 5, 2014 11:06
-
-
Save kizu/8821299 to your computer and use it in GitHub Desktop.
Rounded arrow button prototype.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* 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; | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<a class="button"> | |
Кнопка | |
<span class="button-arrow"></span> | |
</a> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// alert('Hello world!'); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{"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