Skip to content

Instantly share code, notes, and snippets.

@Couto
Created January 27, 2012 01:43
Show Gist options
  • Save Couto/1686400 to your computer and use it in GitHub Desktop.
Save Couto/1686400 to your computer and use it in GitHub Desktop.
Button with Arrow
/**
* Button with Arrow
*/
body {
background: #f06;
background: linear-gradient(45deg, #f06, yellow);
min-height:100%;
}
.button {
position: relative;
top: 10px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
font-weight: bolder;
text-shadow: 0px 1px white;
border-radius: 5px;
padding: 15px 20px;
color: #7c0930;
text-transform: uppercase;
background: #fcfafd; /* Old browsers */
background: -moz-linear-gradient(top, #fcfafd 0%, #d7d5da 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fcfafd), color-stop(100%,#d7d5da)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #fcfafd 0%,#d7d5da 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #fcfafd 0%,#d7d5da 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #fcfafd 0%,#d7d5da 100%); /* IE10+ */
background: linear-gradient(top, #fcfafd 0%,#d7d5da 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfafd', endColorstr='#d7d5da',GradientType=0 ); /* IE6-9 */
}
.button::after {
content: '';
height: 35px;
width: 35px;
position: absolute;
z-index: -1;
top: 6px;
right: -14px;
z-index: -1;
border-radius: 5px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1.5);
background: #fcfafd; /* Old browsers */
background: -moz-linear-gradient(top, #fcfafd 0%, #d7d5da 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fcfafd), color-stop(100%,#d7d5da)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #fcfafd 0%,#d7d5da 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #fcfafd 0%,#d7d5da 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #fcfafd 0%,#d7d5da 100%); /* IE10+ */
background: linear-gradient(top, #fcfafd 0%,#d7d5da 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfafd', endColorstr='#d7d5da',GradientType=0 ); /* IE6-9 */
}
<a class="button">Click here for eternal happiness!</a>
{"view":"split","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment