buttons.css

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; }