Skip to content

Instantly share code, notes, and snippets.

@Ianfeather

Ianfeather/buttons.css

Created September 5, 2017 14:59
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Ianfeather/b6168fdb23591ab0a258b8e931219e83 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Ianfeather/b6168fdb23591ab0a258b8e931219e83 to your computer and use it in GitHub Desktop.
Download ZIP
buttons.css
Raw
buttons.css
.button {
cursor: pointer !important;
padding: 0 !important;
background-color: transparent !important;
background-image: none !important;
border: 1px solid transparent !important;
white-space: nowrap !important;
-webkit-appearance: none;
appearance: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
font-family: inherit !important;
padding: .5rem .875rem !important;
font-size: 1rem !important;
line-height: 1.5rem !important;
border-radius: 3px !important;
text-decoration: none !important;
cursor: pointer !important;
display: inline-block !important;
border: 1px solid transparent !important;
text-align: center !important;
background-color: #0f65ef !important;
color: #fff !important;
border-color: #0f65ef !important;
border: 1px solid transparent !important;
transition: background-color .1s ease 0s !important; }
.button:active {
outline: 0 !important; }
.button:not(.button--disabled):not(:disabled):hover {
background-color: #093c8f !important;
transition: background-color .15s ease 0s !important; }
.button:not(.button--disabled):not(:disabled):active {
background-color: #041e47 !important; }
.button.button--secondary {
border: 1px solid #0f65ef !important;
color: #0f65ef !important;
background: none !important; }
.button.button--secondary:hover {
transition: background-color .15s ease 0s !important; }
.button.button--secondary:not(.button--disabled):not(:disabled):hover {
background-color: #0f65ef !important;
color: #fff !important; }
.button.button--secondary:not(.button--disabled):not(:disabled):active {
background-color: #041e47 !important;
border-color: #041e47 !important;
color: #fff !important; }
.button.button--secondary.button--icon > svg {
fill: #0f65ef !important; }
.button.button--secondary.button--icon:not(.button--disabled):not(:disabled):hover svg {
fill: #fff !important; }
.button--negative {
background-color: #e32 !important;
color: #fff !important;
border-color: #e32 !important;
border: 1px solid transparent !important;
transition: background-color .1s ease 0s !important; }
.button--negative:not(.button--disabled):not(:disabled):hover {
background-color: #9e180c !important;
transition: background-color .15s ease 0s !important; }
.button--negative:not(.button--disabled):not(:disabled):active {
background-color: #570d07 !important; }
.button--negative.button--secondary {
border: 1px solid #e32 !important;
color: #e32 !important;
background: none !important; }
.button--negative.button--secondary:hover {
transition: background-color .15s ease 0s !important; }
.button--negative.button--secondary:not(.button--disabled):not(:disabled):hover {
background-color: #e32 !important;
color: #fff !important; }
.button--negative.button--secondary:not(.button--disabled):not(:disabled):active {
background-color: #570d07 !important;
border-color: #570d07 !important;
color: #fff !important; }
.button--negative.button--secondary.button--icon > svg {
fill: #e32 !important; }
.button--negative.button--secondary.button--icon:not(.button--disabled):not(:disabled):hover svg {
fill: #fff !important; }
.button--white {
background-color: #fff !important;
color: #222 !important;
border-color: #fff !important;
border: 1px solid transparent !important;
transition: background-color .1s ease 0s !important; }
.button--white:not(.button--disabled):not(:disabled):hover {
background-color: #cccccc !important;
transition: background-color .15s ease 0s !important; }
.button--white:not(.button--disabled):not(:disabled):active {
background-color: #a6a6a6 !important; }
.button--white.button--secondary {
border: 1px solid #fff !important;
color: #fff !important;
background: none !important; }
.button--white.button--secondary:hover {
transition: background-color .15s ease 0s !important; }
.button--white.button--secondary:not(.button--disabled):not(:disabled):hover {
background-color: #fff !important;
color: #222 !important; }
.button--white.button--secondary:not(.button--disabled):not(:disabled):active {
background-color: #a6a6a6 !important;
border-color: #a6a6a6 !important;
color: #222 !important; }
.button--white.button--secondary.button--icon > svg {
fill: #fff !important; }
.button--white.button--secondary.button--icon:not(.button--disabled):not(:disabled):hover svg {
fill: #fff !important; }
.button--white.button--secondary:not(.button--disabled):not(:disabled):active {
background-color: #e6e5e5 !important; }
.button--white.button--icon > svg {
fill: #222 !important; }
.button--white.button--icon:not(.button--disabled):not(:disabled):hover svg {
fill: #222 !important; }
.button--white.button--secondary.button--icon > svg {
fill: #fff !important; }
.button--white.button--secondary.button--icon:not(.button--disabled):not(:disabled):hover svg {
fill: #222 !important; }
.button--transparent {
background-color: transparent !important;
color: #0f65ef !important;
border-color: transparent !important;
border: 1px solid transparent !important; }
.button--transparent:not(.button--disabled):not(:disabled):hover {
background-color: transparent !important;
color: #093c8f !important; }
.button--disabled,
.button:disabled {
opacity: 0.3 !important; }
.button--disabled:hover,
.button:disabled:hover {
cursor: default !important;
transition: none !important; }
.button--small {
padding: .3125rem .625rem !important;
font-size: 0.875rem !important;
line-height: 1.25rem !important; }
.button--icon > svg {
width: 1rem !important;
height: 1rem !important;
fill: #fff !important;
position: relative !important;
top: .125rem !important;
margin-right: .5rem; }
.button--icon.button--small > svg {
width: .875rem !important;
height: .875rem !important;
position: relative !important;
margin-right: .3125rem; }
.button--facebook {
background-color: #3b5998 !important;
color: #fff !important; }
.button--facebook:not(.button--disabled):not(:disabled):hover {
background-color: #1e2e4f !important;
color: #fff !important; }
.button--facebook.button--disabled:hover, .button--facebook:disabled:hover {
color: #fff !important; }
.button--facebook:not(.button--disabled):not(:disabled):active {
background-color: #090e17 !important; }
.button--twitter {
background-color: #55acee !important;
color: #fff !important; }
.button--twitter:not(.button--disabled):not(:disabled):hover {
background-color: #147bc9 !important;
color: #fff !important; }
.button--twitter.button--disabled:hover, .button--twitter:disabled:hover {
color: #fff !important; }
.button--twitter:not(.button--disabled):not(:disabled):active {
background-color: #0d5083 !important; }
.button--google {
background-color: #dd4b39 !important;
color: #fff !important; }
.button--google:not(.button--disabled):not(:disabled):hover {
background-color: #96271a !important;
color: #fff !important; }
.button--google.button--disabled:hover, .button--google:disabled:hover {
color: #fff !important; }
.button--google:not(.button--disabled):not(:disabled):active {
background-color: #55160f !important; }
.button--linkedin {
background-color: #0077b5 !important;
color: #fff !important; }
.button--linkedin:not(.button--disabled):not(:disabled):hover {
background-color: #00344f !important;
color: #fff !important; }
.button--linkedin.button--disabled:hover, .button--linkedin:disabled:hover {
color: #fff !important; }
.button--linkedin:not(.button--disabled):not(:disabled):active {
background-color: #000203 !important; }
.button--pinterest {
background-color: #bd081c !important;
color: #fff !important; }
.button--pinterest:not(.button--disabled):not(:disabled):hover {
background-color: #5b040e !important;
color: #fff !important; }
.button--pinterest.button--disabled:hover, .button--pinterest:disabled:hover {
color: #fff !important; }
.button--pinterest:not(.button--disabled):not(:disabled):active {
background-color: #120103 !important; }
.button--tumblr {
background-color: #36465d !important;
color: #fff !important; }
.button--tumblr:not(.button--disabled):not(:disabled):hover {
background-color: #11151c !important;
color: #fff !important; }
.button--tumblr.button--disabled:hover, .button--tumblr:disabled:hover {
color: #fff !important; }
.button--tumblr:not(.button--disabled):not(:disabled):active {
background-color: black !important; }
.button--youtube {
background-color: #cd201f !important;
color: #fff !important; }
.button--youtube:not(.button--disabled):not(:disabled):hover {
background-color: #741212 !important;
color: #fff !important; }
.button--youtube.button--disabled:hover, .button--youtube:disabled:hover {
color: #fff !important; }
.button--youtube:not(.button--disabled):not(:disabled):active {
background-color: #320808 !important; }
.button--instagram {
background-color: #517fa4 !important;
color: #fff !important; }
.button--instagram:not(.button--disabled):not(:disabled):hover {
background-color: #2f4a60 !important;
color: #fff !important; }
.button--instagram.button--disabled:hover, .button--instagram:disabled:hover {
color: #fff !important; }
.button--instagram:not(.button--disabled):not(:disabled):active {
background-color: #16222d !important; }
.button--sms {
background-color: #68af15 !important;
color: #fff !important; }
.button--sms:not(.button--disabled):not(:disabled):hover {
background-color: #32540a !important;
color: #fff !important; }
.button--sms.button--disabled:hover, .button--sms:disabled:hover {
color: #fff !important; }
.button--sms:not(.button--disabled):not(:disabled):active {
background-color: #091002 !important; }
.button--rss {
background-color: #f47f16 !important;
color: #fff !important; }
.button--rss:not(.button--disabled):not(:disabled):hover {
background-color: #9d4e07 !important;
color: #fff !important; }
.button--rss.button--disabled:hover, .button--rss:disabled:hover {
color: #fff !important; }
.button--rss:not(.button--disabled):not(:disabled):active {
background-color: #542a04 !important; }
.button--apple-news {
background-color: #222 !important;
color: #fff !important; }
.button--apple-news:not(.button--disabled):not(:disabled):hover {
background-color: black !important;
color: #fff !important; }
.button--apple-news.button--disabled:hover, .button--apple-news:disabled:hover {
color: #fff !important; }
.button--apple-news:not(.button--disabled):not(:disabled):active {
background-color: black !important; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment