Skip to content

Instantly share code, notes, and snippets.

@curiositry
Created August 11, 2014 05:55
Show Gist options
  • Select an option

  • Save curiositry/dd4df45fc3e3a0f51874 to your computer and use it in GitHub Desktop.

Select an option

Save curiositry/dd4df45fc3e3a0f51874 to your computer and use it in GitHub Desktop.
My CTA button style.
.btn {
border: 2px solid #dd4814;
background-color: orange;
color: white;
text-transform: uppercase;
padding: 4px 15px;
font: 900 1.4em Fira Sans, Fira Sans OT, Helvetica, sans-serif;
letter-spacing: .05em;
border-radius:2px;
cursor: pointer;
width: 100%;
background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, #FF8000),
color-stop(0.66, #FA6603)
);
background-image: -o-linear-gradient(bottom, #FF8000 0%, #FA6603 66%);
background-image: -moz-linear-gradient(bottom, #FF8000 0%, #FA6603 66%);
background-image: -webkit-linear-gradient(bottom, #FF8000 0%, #FA6603 66%);
background-image: -ms-linear-gradient(bottom, #FF8000 0%, #FA6603 66%);
background-image: linear-gradient(to bottom, #FF8000 0%, #FA6603 66%);
}
.btn:hover, .btn:active {
background-image:none;
text-decoration: none;
background-color: #dd4814;
box-shadow: inset 0 0 7px black;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment