Code Snippet - Membuat button Menarik dengan HTML dan CSS
Jurnalcode.com

Code Snippet - Membuat button Menarik dengan HTML dan CSS


Jurnalcode : Kali ini Kita akan melanjutkan tutorial mengenai code Snippet . nah yang kita bahasa adalah snippet button ya. dengan sentuhan beberapa code CSS button akan terlihat manis dan lembut seperti beberapa contoh dibawah ini :

ayo kita mulai coding :

 

1. Snippet Button Animasi Border

 

<style>
@import url(https://fonts.googleapis.com/css?family=BenchNine:700);
.btnJurnal {
  background-color: #c47135;
  border: none;
  color: #ffffff;
  cursor: pointer;
  display: inline-block;
  font-family: 'BenchNine', Arial, sans-serif;
  font-size: 1em;
  font-size: 22px;
  line-height: 1em;
  margin: 15px 40px;
  outline: none;
  padding: 12px 40px 10px;
  position: relative;
  text-transform: uppercase;
  font-weight: 700;
}

.btnJurnal:before,
.btnJurnal:after {
  border-color: transparent;
  -webkit-transition: all 0.25s;
  transition: all 0.25s;
  border-style: solid;
  border-width: 0;
  content: "";
  height: 24px;
  position: absolute;
  width: 24px;
}

.btnJurnal:before {
  border-color: #c47135;
  border-top-width: 2px;
  left: 0px;
  top: -5px;
}

.btnJurnal:after {
  border-bottom-width: 2px;
  border-color: #c47135;
  bottom: -5px;
  right: 0px;
}

.btnJurnal:hover,
.btnJurnal.hover {
  background-color: #c47135;
}

.btnJurnal:hover:before,
.btnJurnal.hover:before,
.btnJurnal:hover:after,
.btnJurnal.hover:after {
  height: 100%;
  width: 100%;
}
</style>
<!-- Tampilkan Button -->
<button class="btnJurnal">Submit</button>
<button class="btnJurnal">Read More</button>
<button class="btnJurnal">Add to Cart</button>
<button class="btnJurnal">Subscribe</button>

 

2. Snippet Button Outline

 

<style>
@import url(https://fonts.googleapis.com/css?family=Roboto);
.btnJurnal {
  font-family: 'Roboto', Arial, sans-serif;
  color: #ffffff;
  cursor: pointer;
  padding: 0px 40px;
  display: inline-block;
  margin: 15px 30px;
  text-transform: uppercase;
  line-height: 2.7em;
  letter-spacing: 1.5px;
  font-size: 1em;
  outline: none;
  position: relative;
  font-size: 16px;
  border: 3px solid #fff;
  background-color: transparent;
  border-radius: 15px 0 15px 15px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.btnJurnal:before {
  content: "";
  position: absolute;
  right: -3px;
  top: -3px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 35px 35px 0;
  border-color: transparent #c87f0a transparent transparent;
  z-index: 1;
}

.btnJurnal:hover,
.btnJurnal.hover {
  border-color: #c87f0a;

}
</style>
<button class="btnJurnal">Submit</button>
<button class="btnJurnal">Read More</button>
<button class="btnJurnal">Add to Cart</button>
<button class="btnJurnal">Subscribe</button>

 

3. Snippet Button Red

 

<style>
@import url(https://fonts.googleapis.com/css?family=Poppins:500);
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css);
.snip1547 {
  background-color: transparent;
  border: none;
  color: #ffffff;
  cursor: pointer;
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 17.5px;
  font-weight: 500;
  line-height: 48px;
  margin: 15px 30px;
  outline: none;
  padding: 0 43px 0 0;
  position: relative;
  text-transform: uppercase;
}

.snip1547 span {
  background-color: #c72544;
  border-radius: 5px 0 0 5px;
  padding: 10px 20px;
  -webkit-transition: all 0.15s ease-in;
  transition: all 0.15s ease-in;
}

.snip1547:after {
  font-family: FontAwesome;
  content: "f0da";
  background-color: #c72544;
  position: absolute;
  right: 0%;
  height: 48px;
  padding: 1px 20px;
  top: 0;
  border-radius: 0 5px 5px 0;
  -webkit-transition: all 0.15s ease-in;
  transition: all 0.15s ease-in;
}

.btnJurnal:hover span,
.snip1547.hover span {
  background-color: #ba2340;
}

.btnJurnal:hover:after,
.snip1547.hover:after {
  margin-top: -5px;
  background-color: #da3655;
  box-shadow: -5px 10px 20px rgba(0, 0, 0, 0.5);
}

</style>
<button class="btnJurnal">Submit</button>
<button class="btnJurnal">Read More</button>
<button class="btnJurnal">Add to Cart</button>
<button class="btnJurnal">Subscribe</button>

 

Semoga bermanfaat .. terimakasih

 

.

Ayo Komentar