Bootstrap Buttons

by CreativeTim

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700,200" rel="stylesheet" />
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">

<div class="section section-basic" id="basic-elements">
  <div class="container">
    <h3 class="title">Basic Elements</h3>
    <h4>Buttons</h4>
    <p class="category">Pick your style</p>
    <div class="row">
      <div class="col-md-10">
        <button class="btn btn-primary" type="button">Default</button>
        <button class="btn btn-primary btn-round" type="button">Round</button>
        <button class="btn btn-primary btn-round" type="button">
          <i class="now-ui-icons ui-2_favourite-28"></i> With Icon
        </button>
        <button class="btn btn-primary btn-icon btn-round" type="button">
          <i class="now-ui-icons ui-2_favourite-28"></i>
        </button>
        <button class="btn btn-primary btn-simple btn-round" type="button">Simple</button>
      </div>
    </div>
    <p class="category">Pick your size</p>
    <div class="row">
      <div class="col-md-10">
        <button class="btn btn-primary btn-sm">Small</button>
        <button class="btn btn-primary">Regular</button>
        <button class="btn btn-primary btn-lg">Large</button>
      </div>
    </div>
    <p class="category">Pick your color</p>
    <div class="row">
      <div class="col-md-10">
        <button class="btn">Default</button>
        <button class="btn btn-primary">Primary</button>
        <button class="btn btn-info">Info</button>
        <button class="btn btn-success">Success</button>
        <button class="btn btn-warning">Warning</button>
        <button class="btn btn-danger">Danger</button>
        <button class="btn btn-neutral">Neutral</button>
      </div>
    </div>
    <h4>Links</h4>
    <div class="row">
      <div class="col-md-8">
        <button class="btn...

CSS

body {
  color: #2c2c2c;
  font-size: 14px;
  font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.btn {
  border-width: 2px;
  font-weight: 400;
  font-size: 0.8571em;
  line-height: 1.35em;
  margin: 10px 1px;
  border: none;
  border-radius: 0.1875rem;
  padding: 11px 22px;
  cursor: pointer;
  background-color: #888888;
  color: #FFFFFF;
}

.btn:hover,
.btn:focus,
.btn:not(:disabled):not(.disabled):active,
.btn:not(:disabled):not(.disabled):active:focus,
.btn:active:hover {
  background-color: #979797;
  color: #FFFFFF;
  box-shadow: none;
}

.btn:hover {
  box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.17);
}

.btn:disabled,
.btn:disabled:hover,
.btn:disabled:focus,
.btn:disabled:active,
.btn[disabled],
.btn[disabled]:hover,
.btn[disabled]:focus,
.btn[disabled]:active {
  background-color: #888888;
  border-color: #888888;
}

.btn.btn-simple {
  color: #888888;
  border-color: #888888;
}

.btn.btn-simple:hover,
.btn.btn-simple:focus,
.btn.btn-simple:not(:disabled):not(.disabled):active,
.btn.btn-simple:not(:disabled):not(.disabled):active:focus,
.btn.btn-simple:active:hover {
  background-color: transparent;
  color: #979797;
  border-color: #979797;
  box-shadow: none;
}

.btn.btn-link {
  color: #888888;
}

.btn.btn-link:hover,
.btn.btn-link:focus,
.btn.btn-link:not(:disabled):not(.disabled):active,
.btn.btn-link:not(:disabled):not(.disabled):active:focus,
.btn.btn-link:active:hover {
  background-color: transparent;
  color: #979797;
  text-decoration: none;
  box-shadow: none;
}

.btn:hover,
.btn:focus {
  opacity: 1;
  filter: alpha(opacity=100);
  outline: 0 !important;
}

.btn:active {
  -webkit-box-shadow: none;
  box-shadow: none;
  outline: 0 !important;
}

.btn.btn-icon {
  height: 2.375rem;
  min-width: 2.375rem;
  width: 2.375rem;
  padding: 0;
  font-size: 0.9375rem;
  overflow: hidden;
  position: relative;
  line-height: normal;
}

.btn.btn-icon.btn-simple {
  padding: 0;
}

.btn.btn-icon.btn-sm...

JavaScript

/* This snippet doesn't have javascript */