Skip to content

Instantly share code, notes, and snippets.

@regepan
Last active August 12, 2023 16:30
Show Gist options
  • Star 11 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save regepan/7cf682994cb9cc5bccabbeee3b8f398a to your computer and use it in GitHub Desktop.
Save regepan/7cf682994cb9cc5bccabbeee3b8f398a to your computer and use it in GitHub Desktop.
.btn {
font-size: 14px;
padding: 6px 12px;
margin-bottom: 0;
display: inline-block;
text-decoration: none;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
}
.btn:focus,
.btn:active:focus {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
.btn:hover,
.btn:focus {
color: #333;
text-decoration: none;
}
.btn:active {
background-image: none;
outline: 0;
-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}
/* default
---------------------------- */
.btn-default {
color: #333;
background-color: #fff;
border-color: #ccc;
}
.btn-default:focus {
color: #333;
background-color: #e6e6e6;
border-color: #8c8c8c;
}
.btn-default:hover {
color: #333;
background-color: #e6e6e6;
border-color: #adadad;
}
.btn-default:active {
color: #333;
background-color: #e6e6e6;
border-color: #adadad;
}
<a href="#" class="btn btn-default">button</a>
@AnkushMalik
Copy link

nice gist; but I think there should also be a border-radius of 4px to .btn class :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment