https://idea-hack.com/blog/15172/
CSSで作る43のおしゃれなボタンテンプレート

CSSで作る43のおしゃれなボタンテンプレート

綺麗なデザインはユーザーを心地よくさせ、サイトの滞在時間に良い影響をもたらします。 この記事では、ボタンのテンプレートを紹介しています。

Pattern 1

Pattern 1-1

Output
HTML
<div class="text-center mb-4 mx-auto">
  <a class="btn-pattern-1 mx-auto" href="#">Button Text</a>
</div>
CSS
.btn-pattern-1 {
  display: inline-block;
  padding: 7px 10px;
  text-decoration: none;
  color: #fff;
  border: solid 3px #484848;
  background: #f5f5f5;
  color: #484848;
  text-decoration: none;
  transition: all .3s;
}
.btn-pattern-1:before {
  font-weight: bold;
  font-family: "Font Awesome 5 Free";
  margin-right: 7px;
  content: "\f360";
}
.btn-pattern-1:hover {
  background: #484848;
  color: #ffffff;
  transition: all .3s;
}

Pattern 1-2

Output
HTML
<div class="text-center mb-4 mx-auto">
  <a class="btn-pattern-2 mx-auto" href="#">Button Text</a>
</div>
CSS
.btn-pattern-2 {
  display: inline-block;
  padding: 7px 10px;
  text-decoration: none;
  color: #fff;
  border: solid 3px #484848;
  background: #f5f5f5;
  color: #484848;
  text-decoration: none;
  border-radius: 5px;
  transition: all .3s;
}
.btn-pattern-2:before {
  font-weight: bold;
  font-family: "Font Awesome 5 Free";
  margin-right: 7px;
  content: "\f360";
}
.btn-pattern-2:hover {
  background: #484848;
  color: #ffffff;
  transition: all .3s;
}

Pattern 1-3

Output
HTML
<div class="text-center mb-4 mx-auto">
  <a class="btn-pattern-3 mx-auto" href="#">Button Text</a>
</div>
CSS
.btn-pattern-3 {
  display: inline-block;
  padding: 7px 10px;
  text-decoration: none;
  color: #fff;
  border: solid 3px #484848;
  background: #f5f5f5;
  color: #484848;
  text-decoration: none;
  border-radius: 20px;
  transition: all .3s;
}
.btn-pattern-3:before {
  font-weight: bold;
  font-family: "Font Awesome 5 Free";
  margin-right: 7px;
  content: "\f360";
}
.btn-pattern-3:hover {
  background: #484848;
  color: #ffffff;
  transition: all .3s;
}

Pattern 2

Pattern 2-1

Output
HTML
<div class="text-center mb-4 mx-auto">
  <a class="btn-pattern-4 mx-auto" href="#">Button Text</a>
</div>
CSS
.btn-pattern-4 {
  display: inline-block;
  padding: 10px 13px;
  text-decoration: none;
  color: #fff;
  background: #f5f5f5;
  color: #484848;
  text-decoration: none;
  transition: all .3s;
}
.btn-pattern-4:before {
  font-weight: bold;
  font-family: "Font Awesome 5 Free";
  margin-right: 7px;
  content: "\f360";
}
.btn-pattern-4:hover {
  background: #484848;
  color: #ffffff;
  transition: all .3s;
}

Pattern 2-2

Output
HTML
<div class="text-center mb-4 mx-auto">
  <a class="btn-pattern-5 mx-auto" href="#">Button Text</a>
</div>
CSS
.btn-pattern-5 {
  display: inline-block;
  padding: 10px 13px;
  text-decoration: none;
  color: #fff;
  background: #f5f5f5;
  color: #484848;
  text-decoration: none;
  border-radius: 5px;
  transition: all .3s;
}
.btn-pattern-5:before {
  font-weight: bold;
  font-family: "Font Awesome 5 Free";
  margin-right: 7px;
  content: "\f360";
}
.btn-pattern-5:hover {
  background: #484848;
  color: #ffffff;
  transition: all .3s;
}

Pattern 2-3

Output
HTML
<div class="text-center mb-4 mx-auto">
  <a class="btn-pattern-6 mx-auto" href="#">Button Text</a>
</div>
CSS
.btn-pattern-6 {
  display: inline-block;
  padding: 10px 13px;
  text-decoration: none;
  color: #fff;
  background: #f5f5f5;
  color: #484848;
  text-decoration: none;
  border-radius: 20px;
  transition: all .3s;
}
.btn-pattern-6:before {
  font-weight: bold;
  font-family: "Font Awesome 5 Free";
  margin-right: 7px;
  content: "\f360";
}
.btn-pattern-6:hover {
  background: #484848;
  color: #ffffff;
  transition: all .3s;
}

Pattern 3

Pattern 3-1

Output
HTML
<div class="text-center mb-4 mx-auto">
  <a class="btn-pattern-7 mx-auto" href="#">Button Text</a>
</div>
CSS
.btn-pattern-7 {
  display: inline-block;
  padding: 10px 13px;
  color: #fff;
  border-bottom: solid 3px #ccc;
  background: #484848;
}
.btn-pattern-7:before {
  font-weight: bold;
  font-family: "Font Awesome 5 Free";
  margin-right: 7px;
  content: "\f360";
}
.btn-pattern-7:active {
  -webkit-transform: translateY(4px);
          transform: translateY(4px);
  border-bottom: none;
}
.btn-pattern-7:hover {
  color: #fff;
}

Pattern 3-2

Output
HTML
<div class="text-center mb-4 mx-auto">
  <a class="btn-pattern-8 mx-auto" href="#">Button Text</a>
</div>
CSS
.btn-pattern-8 {
  display: inline-block;
  padding: 10px 13px;
  color: #fff;
  border-bottom: solid 3px #ccc;
  border-radius: 5px;
  background: #484848;
}
.btn-pattern-8:before {
  font-weight: bold;
  font-family: "Font Awesome 5 Free";
  margin-right: 7px;
  content: "\f360";
}
.btn-pattern-8:active {
  -webkit-transform: translateY(4px);
          transform: translateY(4px);
  border-bottom: none;
}
.btn-pattern-8:hover {
  color: #fff;
}

Pattern 3-3

Output
HTML
<div class="text-center mb-4 mx-auto">
  <a class="btn-pattern-9 mx-auto" href="#">Button Text</a>
</div>
CSS
.btn-pattern-9 {
  display: inline-block;
  padding: 10px 13px;
  color: #fff;
  border-bottom: solid 3px #ccc;
  border-radius: 20px;
  background: #484848;
}
.btn-pattern-9:before {
  font-weight: bold;
  font-family: "Font Awesome 5 Free";
  margin-right: 7px;
  content: "\f360";
}
.btn-pattern-9:active {
  -webkit-transform: translateY(4px);
          transform: translateY(4px);
  border-bottom: none;
}
.btn-pattern-9:hover {
  color: #fff;
}

Pattern 4

Pattern 4-1

Output
HTML
<div class="text-center mb-4 mx-auto">
  <a class="btn-pattern-10 mx-auto" href="#">Button Text</a>
</div>
CSS
.btn-pattern-10 {
  display: inline-block;
  padding: 10px 13px;
  text-decoration: none;
  color: #5f5f5f;
  border-bottom: solid 3px #ccc;
  background: #484848;
  font-weight: bold;
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5);
  transition: all .3s;
}
.btn-pattern-10:before {
  font-weight: bold;
  font-family: "Font Awesome 5 Free";
  margin-right: 7px;
  content: "\f360";
}
.btn-pattern-10:active {
  -webkit-transform: translateY(4px);
          transform: translateY(4px);
  border-bottom: none;
}
.btn-pattern-10:hover {
  color: #fff;
  transition: color .3s;
}

Pattern 4-2

Output
HTML
<div class="text-center mb-4 mx-auto">
  <a class="btn-pattern-11 mx-auto" href="#">Button Text</a>
</div>
CSS
.btn-pattern-11 {
  display: inline-block;
  padding: 10px 13px;
  text-decoration: none;
  color: #5f5f5f;
  border-bottom: solid 3px #ccc;
  border-radius: 5px;
  background: #484848;
  font-weight: bold;
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5);
  transition: all .3s;
}
.btn-pattern-11:before {
  font-weight: bold;
  font-family: "Font Awesome 5 Free";
  margin-right: 7px;
  content: "\f360";
}
.btn-pattern-11:active {
  -webkit-transform: translateY(4px);
          transform: translateY(4px);
  border-bottom: none;
}
.btn-pattern-11:hover {
  color: #fff;
  transition: color .3s;
}

Pattern 4-3

Output
HTML
<div class="text-center mb-4 mx-auto">
  <a class="btn-pattern-12 mx-auto" href="#">Button Text</a>
</div>
CSS
.btn-pattern-12 {
  display: inline-block;
  padding: 10px 13px;
  text-decoration: none;
  color: #5f5f5f;
  border-bottom: solid 3px #ccc;
  border-radius: 20px;
  background: #484848;
  font-weight: bold;
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5);
  transition: all .3s;
}
.btn-pattern-12:before {
  font-weight: bold;
  font-family: "Font Awesome 5 Free";
  margin-right: 7px;
  content: "\f360";
}
.btn-pattern-12:active {
  -webkit-transform: translateY(4px);
          transform: translateY(4px);
  border-bottom: none;
}
.btn-pattern-12:hover {
  color: #fff;
  transition: color .3s;
}

Pattern 5

Pattern 5-1

Output
HTML
<div class="text-center mb-4 mx-auto">
  <a class="btn-pattern-13 mx-auto" href="#">Button Text</a>
</div>
CSS
.btn-pattern-13 {
  display: inline-block;
  padding: 10px 13px;
  text-decoration: none;
  color: #5f5f5f;
  border-bottom: solid 3px #ccc;
  background: #484848;
  font-weight: bold;
  text-shadow: -1px -1px rgba(255, 255, 255, 0.44), 1px 1px rgba(0, 0, 0, 0.38);
  transition: all .3s;
}
.btn-pattern-13:before {
  font-weight: bold;
  font-family: "Font Awesome 5 Free";
  margin-right: 7px;
  content: "\f360";
}
.btn-pattern-13:active {
  -webkit-transform: translateY(4px);
          transform: translateY(4px);
  border-bottom: none;
}
.btn-pattern-13:hover {
  color: #fff;
  transition: color .3s;
}

Pattern 5-2

Output
HTML
<div class="text-center mb-4 mx-auto">
  <a class="btn-pattern-14 mx-auto" href="#">Button Text</a>
</div>
CSS
.btn-pattern-14 {
  display: inline-block;
  padding: 10px 13px;
  text-decoration: none;
  color: #5f5f5f;
  border-bottom: solid 3px #ccc;
  border-radius: 5px;
  background: #484848;
  font-weight: bold;
  text-shadow: -1px -1px rgba(255, 255, 255, 0.44), 1px 1px rgba(0, 0, 0, 0.38);
  transition: all .3s;
}
.btn-pattern-14:before {
  font-weight: bold;
  font-family: "Font Awesome 5 Free";
  margin-right: 7px;
  content: "\f360";
}
.btn-pattern-14:active {
  -webkit-transform: translateY(4px);
          transform: translateY(4px);
  border-bottom: none;
}
.btn-pattern-14:hover {
  color: #fff;
  transition: color .3s;
}

Pattern 5-3

Output
HTML
<div class="text-center mb-4 mx-auto">
  <a class="btn-pattern-15 mx-auto" href="#">Button Text</a>
</div>
CSS
.btn-pattern-15 {
  display: inline-block;
  padding: 10px 13px;
  text-decoration: none;
  color: #5f5f5f;
  border-bottom: solid 3px #ccc;
  border-radius: 20px;
  background: #484848;
  font-weight: bold;
  text-shadow: -1px -1px rgba(255, 255, 255, 0.44), 1px 1px rgba(0, 0, 0, 0.38);
  transition: all .3s;
}
.btn-pattern-15:before {
  font-weight: bold;
  font-family: "Font Awesome 5 Free";
  margin-right: 7px;
  content: "\f360";
}
.btn-pattern-15:active {
  -webkit-transform: translateY(4px);
          transform: translateY(4px);
  border-bottom: none;
}
.btn-pattern-15:hover {
  color: #fff;
  transition: color .3s;
}

Pattern 6

Pattern 6-1

Output
HTML
<div class="text-center mb-4 mx-auto">
  <a class="btn-pattern-16 mx-auto" href="#">Button Text</a>
</div>
CSS
.btn-pattern-16 {
  display: inline-block;
  position: relative;
  padding: 10px 13px;
  text-decoration: none;
  color: #ffffff;
  background: #484848;
  border-bottom: solid 5px #cccccc;
  border-right: solid 5px #cccccc;
}
.btn-pattern-16:before {
  font-weight: bold;
  font-family: "Font Awesome 5 Free";
  margin-right: 7px;
  content: "\f360";
}
.btn-pattern-16:active {
  border: none;
}
.btn-pattern-16:hover {
  color: #fff;
}

Pattern 6-2

Output
HTML
<div class="text-center mb-4 mx-auto">
  <a class="btn-pattern-17 mx-auto" href="#">Button Text</a>
</div>
CSS
.btn-pattern-17 {
  display: inline-block;
  position: relative;
  padding: 10px 13px;
  border-radius: 5px;
  text-decoration: none;
  color: #ffffff;
  background: #484848;
  border-bottom: solid 4px #cccccc;
  border-right: solid 4px #cccccc;
}
.btn-pattern-17:before {
  font-weight: bold;
  font-family: "Font Awesome 5 Free";
  margin-right: 7px;
  content: "\f360";
}
.btn-pattern-17:active {
  border: none;
}
.btn-pattern-17:hover {
  color: #fff;
}

Pattern 6-3

Output
HTML
<div class="text-center mb-4 mx-auto">
  <a class="btn-pattern-18 mx-auto" href="#">Button Text</a>
</div>
CSS
.btn-pattern-18 {
  display: inline-block;
  position: relative;
  padding: 10px 13px;
  border-radius: 20px;
  text-decoration: none;
  color: #ffffff;
  background: #484848;
  border-bottom: solid 4px #cccccc;
  border-right: solid 4px #cccccc;
}
.btn-pattern-18:before {
  font-weight: bold;
  font-family: "Font Awesome 5 Free";
  margin-right: 7px;
  content: "\f360";
}
.btn-pattern-18:active {
  border: none;
}
.btn-pattern-18:hover {
  color: #fff;
}

Pattern 7

Pattern 7-1

Output
HTML
<div class="text-center mb-4 mx-auto">
  <a class="btn-pattern-19 mx-auto" href="#">Button Text</a>
</div>
CSS
.btn-pattern-19 {
  display: inline-block;
  position: relative;
  padding: 10px 13px;
  text-decoration: none;
  color: #484848;
  background: #f5f5f5;
  border-left: solid 5px #484848;
}
.btn-pattern-19:before {
  font-weight: bold;
  font-family: "Font Awesome 5 Free";
  margin-right: 7px;
  content: "\f360";
}
.btn-pattern-19:hover {
  color: #484848 !important;
  opacity: .8;
}

Pattern 7-2

Output
HTML
<div class="text-center mb-4 mx-auto">
  <a class="btn-pattern-20 mx-auto" href="#">Button Text</a>
</div>
CSS
.btn-pattern-20 {
  display: inline-block;
  position: relative;
  padding: 10px 13px;
  text-decoration: none;
  color: #484848;
  background: #f5f5f5;
  border-left: solid 5px #484848;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
}
.btn-pattern-20:before {
  font-weight: bold;
  font-family: "Font Awesome 5 Free";
  margin-right: 7px;
  content: "\f360";
}
.btn-pattern-20:active {
  box-shadow: inset 0 0 2px rgba(128, 128, 128, 0.1);
  -webkit-transform: translateY(2px);
          transform: translateY(2px);
}
.btn-pattern-20:hover {
  color: #484848;
  opacity: .8;
}

Pattern 8

Pattern 8-1

Output
HTML
<div class="text-center mb-4 mx-auto">
  <a class="btn-pattern-22 mx-auto" href="#">Button Text</a>
</div>
CSS
.btn-pattern-22 {
  display: inline-block;
  padding: 10px 13px;
  text-decoration: none;
  color: #fff;
  border: double 4px #484848;
  background: #f5f5f5;
  color: #484848;
  text-decoration: none;
  transition: all .3s;
}
.btn-pattern-22:before {
  font-weight: bold;
  font-family: "Font Awesome 5 Free";
  margin-right: 7px;
  content: "\f360";
}
.btn-pattern-22:hover {
  background: #484848;
  color: #ffffff;
  transition: all .3s;
}

Pattern 8-2

Output
HTML
<div class="text-center mb-4 mx-auto">
  <a class="btn-pattern-23 mx-auto" href="#">Button Text</a>
</div>
CSS
.btn-pattern-23 {
  display: inline-block;
  padding: 10px 13px;
  text-decoration: none;
  color: #fff;
  border: double 4px #484848;
  border-radius: 5px;
  background: #f5f5f5;
  color: #484848;
  text-decoration: none;
  transition: all .3s;
}
.btn-pattern-23:before {
  font-weight: bold;
  font-family: "Font Awesome 5 Free";
  margin-right: 7px;
  content: "\f360";
}
.btn-pattern-23:hover {
  background: #484848;
  color: #ffffff;
  transition: all .3s;
}

Pattern 8-3

Output
HTML
<div class="text-center mb-4 mx-auto">
  <a class="btn-pattern-24 mx-auto" href="#">Button Text</a>
</div>
CSS
.btn-pattern-24 {
  display: inline-block;
  padding: 10px 13px;
  text-decoration: none;
  color: #fff;
  border: double 4px #484848;
  border-radius: 20px;
  background: #f5f5f5;
  color: #484848;
  text-decoration: none;
  transition: all .3s;
}
.btn-pattern-24:before {
  font-weight: bold;
  font-family: "Font Awesome 5 Free";
  margin-right: 7px;
  content: "\f360";
}
.btn-pattern-24:hover {
  background: #484848;
  color: #ffffff;
  transition: all .3s;
}

Pattern 9

Pattern 9-1

Output
HTML
<div class="text-center mb-4 mx-auto">
  <a class="btn-pattern-25 mx-auto" href="#">Button Text</a>
</div>
CSS
.btn-pattern-25 {
  display: inline-block;
  padding: 10px 13px;
  text-decoration: none;
  color: #fff;
  border: dashed 1px #484848;
  background: #f5f5f5;
  color: #484848;
  text-decoration: none;
  transition: all .3s;
}
.btn-pattern-25:before {
  font-weight: bold;
  font-family: "Font Awesome 5 Free";
  margin-right: 7px;
  content: "\f360";
}
.btn-pattern-25:hover {
  border-style: dotted;
  color: #484848 !important;
  transition: all .3s;
}

Pattern 9-2

Output
HTML
<div class="text-center mb-4 mx-auto">
  <a class="btn-pattern-26 mx-auto" href="#">Button Text</a>
</div>
CSS
.btn-pattern-26 {
  display: inline-block;
  padding: 10px 13px;
  text-decoration: none;
  color: #fff;
  border: dashed 1px #484848;
  border-radius: 5px;
  background: #f5f5f5;
  color: #484848;
  text-decoration: none;
  transition: all .3s;
}
.btn-pattern-26:before {
  font-weight: bold;
  font-family: "Font Awesome 5 Free";
  margin-right: 7px;
  content: "\f360";
}
.btn-pattern-26:hover {
  border-style: dotted;
  color: #484848 !important;
  transition: all .3s;
}

Pattern 9-3

Output
HTML
<div class="text-center mb-4 mx-auto">
  <a class="btn-pattern-27 mx-auto" href="#">Button Text</a>
</div>
CSS
.btn-pattern-27 {
  display: inline-block;
  padding: 10px 13px;
  text-decoration: none;
  color: #fff;
  border: dashed 1px #484848;
  border-radius: 20px;
  background: #f5f5f5;
  color: #484848;
  text-decoration: none;
  transition: all .3s;
}
.btn-pattern-27:before {
  font-weight: bold;
  font-family: "Font Awesome 5 Free";
  margin-right: 7px;
  content: "\f360";
}
.btn-pattern-27:hover {
  border-style: dotted;
  color: #484848 !important;
  transition: all .3s;
}

Pattern 10

Pattern 10-1

Output
HTML
<div class="text-center mb-4 mx-auto">
  <a class="btn-pattern-28 mx-auto" href="#">Button Text</a>
</div>
CSS
.btn-pattern-28 {
  display: inline-block;
  position: relative;
  padding: 10px 13px;
  text-decoration: none;
  color: #484848;
  background: #ffffff;
  transition: all .3s;
}
.btn-pattern-28:before, .btn-pattern-28:after {
  position: absolute;
  top: 0;
  content: '';
  width: 8px;
  height: 100%;
  display: inline-block;
}
.btn-pattern-28:before {
  border-left: solid 2px #484848;
  border-top: solid 2px #484848;
  border-bottom: solid 2px #484848;
  left: 0;
}
.btn-pattern-28:after {
  content: '';
  border-top: solid 2px #484848;
  border-right: solid 2px #484848;
  border-bottom: solid 2px #484848;
  right: 0;
}
.btn-pattern-28:hover {
  color: #ffffff;
  background: #484848;
  text-decoration: none;
}

Pattern 10-2

Output
HTML
<div class="text-center mb-4 mx-auto">
  <a class="btn-pattern-29 mx-auto" href="#">Button Text</a>
</div>
CSS
.btn-pattern-29 {
  display: inline-block;
  position: relative;
  padding: 10px 13px;
  text-decoration: none;
  background: #f5f5f5;
  color: #484848;
  text-decoration: none;
  transition: all .3s;
}
.btn-pattern-29:before, .btn-pattern-29:after {
  position: absolute;
  top: 0;
  content: '';
  width: 8px;
  height: 100%;
  display: inline-block;
}
.btn-pattern-29:before {
  border-left: solid 2px #484848;
  border-top: solid 2px #484848;
  border-bottom: solid 2px #484848;
  left: 0;
}
.btn-pattern-29:after {
  content: '';
  border-top: solid 2px #484848;
  border-right: solid 2px #484848;
  border-bottom: solid 2px #484848;
  right: 0;
}
.btn-pattern-29:hover {
  color: #ffffff;
  background: #484848;
  text-decoration: none;
}

Pattern 11

Pattern 11-1

Output
HTML
<div class="text-center mb-4 mx-auto">
  <a class="btn-pattern-31 mx-auto" href="#">Button Text</a>
</div>
CSS
.btn-pattern-31 {
  display: inline-block;
  position: relative;
  padding: 10px 13px;
  text-decoration: none;
  background: #484848;
  color: #ffffff;
  border: dashed 1px #ffffff;
  box-shadow: 0px 0px 0px 5px #484848;
  text-decoration: none;
  transition: all .3s;
}
.btn-pattern-31:before {
  font-weight: bold;
  font-family: "Font Awesome 5 Free";
  margin-right: 7px;
  content: "\f360";
}
.btn-pattern-31:hover {
  border-style: dotted;
  color: #ffffff;
  background: #484848;
}

Pattern 11-2

Output
HTML
<div class="text-center mb-4 mx-auto">
  <a class="btn-pattern-32 mx-auto" href="#">Button Text</a>
</div>
CSS
.btn-pattern-32 {
  display: inline-block;
  position: relative;
  padding: 10px 13px;
  text-decoration: none;
  background: #484848;
  color: #ffffff;
  border: dashed 1px #ffffff;
  box-shadow: 0px 0px 0px 5px #484848;
  border-radius: 5px;
  text-decoration: none;
  transition: all .3s;
}
.btn-pattern-32:before {
  font-weight: bold;
  font-family: "Font Awesome 5 Free";
  margin-right: 7px;
  content: "\f360";
}
.btn-pattern-32:hover {
  border-style: dotted;
  color: #ffffff;
  background: #484848;
}

Pattern 11-3

Output
HTML
<div class="text-center mb-4 mx-auto">
  <a class="btn-pattern-33 mx-auto" href="#">Button Text</a>
</div>
CSS
.btn-pattern-33 {
  display: inline-block;
  position: relative;
  padding: 10px 13px;
  text-decoration: none;
  background: #484848;
  color: #ffffff;
  border: dashed 1px #ffffff;
  border-radius: 20px;
  box-shadow: 0px 0px 0px 5px #484848;
  text-decoration: none;
  transition: all .3s;
}
.btn-pattern-33:before {
  font-weight: bold;
  font-family: "Font Awesome 5 Free";
  margin-right: 7px;
  content: "\f360";
}
.btn-pattern-33:hover {
  border-style: dotted;
  color: #ffffff;
  background: #484848;
}

Pattern 12

Pattern 12-1

Output
HTML
<div class="text-center mb-4 mx-auto">
  <a class="btn-pattern-34 mx-auto" href="#">Button Text</a>
</div>
CSS
.btn-pattern-34 {
  display: inline-block;
  position: relative;
  padding: 10px 13px;
  text-decoration: none;
  color: #484848;
  background: #ffffff;
  border-bottom: solid 3px #484848;
  border-left: solid 3px #484848;
  text-decoration: none;
  transition: all .3s;
}
.btn-pattern-34:before {
  font-weight: bold;
  font-family: "Font Awesome 5 Free";
  margin-right: 7px;
  content: "\f360";
}
.btn-pattern-34:hover {
  color: #ffffff;
  background: #484848;
}

Pattern 12-2

Output
HTML
<div class="text-center mb-4 mx-auto">
  <a class="btn-pattern-35 mx-auto" href="#">Button Text</a>
</div>
CSS
.btn-pattern-35 {
  display: inline-block;
  position: relative;
  padding: 10px 13px;
  text-decoration: none;
  color: #484848;
  background: #f5f5f5;
  border-bottom: solid 3px #484848;
  border-left: solid 3px #484848;
  text-decoration: none;
  transition: all .3s;
}
.btn-pattern-35:before {
  font-weight: bold;
  font-family: "Font Awesome 5 Free";
  margin-right: 7px;
  content: "\f360";
}
.btn-pattern-35:hover {
  color: #ffffff;
  background: #484848;
}

Pattern 13

Pattern 13-1

Output
HTML
<div class="text-center mb-4 mx-auto">
  <a class="btn-pattern-37 mx-auto" href="#">Button Text</a>
</div>
CSS
.btn-pattern-37 {
  display: inline-block;
  padding: 7px 10px;
  text-decoration: none;
  color: #fff;
  border: solid 3px #484848;
  background: #ffffff;
  color: #484848;
  text-decoration: none;
  transition: all .3s;
}
.btn-pattern-37:before {
  font-weight: bold;
  font-family: "Font Awesome 5 Free";
  margin-right: 7px;
  content: "\f360";
}
.btn-pattern-37:hover {
  background: #484848;
  color: #ffffff;
  transition: all .3s;
}

Pattern 13-2

Output
HTML
<div class="text-center mb-4 mx-auto">
  <a class="btn-pattern-38 mx-auto" href="#">Button Text</a>
</div>
CSS
.btn-pattern-38 {
  display: inline-block;
  padding: 7px 10px;
  text-decoration: none;
  color: #fff;
  border: solid 3px #484848;
  background: #ffffff;
  color: #484848;
  text-decoration: none;
  border-radius: 5px;
  transition: all .3s;
}
.btn-pattern-38:before {
  font-weight: bold;
  font-family: "Font Awesome 5 Free";
  margin-right: 7px;
  content: "\f360";
}
.btn-pattern-38:hover {
  background: #484848;
  color: #ffffff;
  transition: all .3s;
}

Pattern 13-3

Output
HTML
<div class="text-center mb-4 mx-auto">
  <a class="btn-pattern-39 mx-auto" href="#">Button Text</a>
</div>
CSS
.btn-pattern-39 {
  display: inline-block;
  padding: 7px 10px;
  text-decoration: none;
  color: #fff;
  border: solid 3px #484848;
  background: #ffffff;
  color: #484848;
  text-decoration: none;
  border-radius: 20px;
  transition: all .3s;
}
.btn-pattern-39:before {
  font-weight: bold;
  font-family: "Font Awesome 5 Free";
  margin-right: 7px;
  content: "\f360";
}
.btn-pattern-39:hover {
  background: #484848;
  color: #ffffff;
  transition: all .3s;
}

Pattern 14

Pattern 14-1

Output
HTML
<div class="text-center mb-4 mx-auto">
  <a class="btn-pattern-40 mx-auto" href="#">Button Text</a>
</div>
CSS
.btn-pattern-40 {
  display: inline-block;
  padding: 10px 13px;
  text-decoration: none;
  background: #f5f5f5;
  color: #484848;
  border-left: solid 4px #484848;
  border-right: solid 4px #484848;
  transition: all .3s;
}
.btn-pattern-40:before {
  font-weight: bold;
  font-family: "Font Awesome 5 Free";
  margin-right: 7px;
  content: "\f360";
}
.btn-pattern-40:hover {
  color: #ffffff;
  background: #484848;
  text-decoration: none;
}

Pattern 14-2

Output
HTML
<div class="text-center mb-4 mx-auto">
  <a class="btn-pattern-41 mx-auto" href="#">Button Text</a>
</div>
CSS
.btn-pattern-41 {
  display: inline-block;
  padding: 10px 13px;
  text-decoration: none;
  background: #ffffff;
  color: #484848;
  border-left: solid 4px #484848;
  border-right: solid 4px #484848;
  transition: all .3s;
}
.btn-pattern-41:before {
  font-weight: bold;
  font-family: "Font Awesome 5 Free";
  margin-right: 7px;
  content: "\f360";
}
.btn-pattern-41:hover {
  color: #ffffff;
  background: #484848;
  text-decoration: none;
}

Pattern 15

Pattern 15-1

Output
HTML
<div class="text-center mb-4 mx-auto">
  <a class="btn-pattern-43 mx-auto" href="#">Button Text</a>
</div>
CSS
.btn-pattern-43 {
  display: inline-block;
  position: relative;
  padding: 7px 24px;
  border-top: solid 2px black;
  border-bottom: solid 2px black;
  text-decoration: none;
  color: #fff;
  background: #ffffff;
  color: #484848;
  text-decoration: none;
  transition: all .3s;
}
.btn-pattern-43:before, .btn-pattern-43:after {
  content: '';
  position: absolute;
  top: -7px;
  width: 2px;
  height: calc(100% + 14px);
  background-color: black;
  transition: .3s;
}
.btn-pattern-43:before {
  left: 7px;
}
.btn-pattern-43:after {
  right: 7px;
}
.btn-pattern-43:hover {
  text-decoration: none;
  color: #484848 !important;
  transition: all .3s;
}
.btn-pattern-43:hover:before {
  top: 0px;
  left: 0;
  height: 100%;
}
.btn-pattern-43:hover:after {
  top: 0px;
  right: 0;
  height: 100%;
}