MASIGNALPHA101
6625556490781333381

Css Button Dengan Style Stripped

Css Button Dengan Style Stripped
Thursday, September 27, 2018
Link
Cara Memasang Css Button Stripped Style
Untuk Source Code HTML nya di Bawah ini
<button class="btn btn--stripe">Button</button>
<a href="#" class="btn btn--stripe link">Link</a>
<button class="btn btn--stripe btn--radius">Aggressive Radius</button>
<br/>
<button class="btn btn--stripe btn--large">Large Button</button>
Kemudian Tambahkan Css Berikut ini,
<style>
@-webkit-keyframes stripe-slide {
  0% {
    background-position: 0% 0;
  }
  100% {
    background-position: 100% 0;
  }
}
@keyframes stripe-slide {
  0% {
    background-position: 0% 0;
  }
  100% {
    background-position: 100% 0;
  }
}
.btn {
  overflow: visible;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  line-height: normal;
  cursor: pointer;
  -moz-user-select: text;
  text-decoration: none;
  text-transform: uppercase;
  padding: 16px 36px 22px;
  background-color: #fff;
  color: #039be5;
  border: 2px solid #039be5;
  border-radius: 6px;
  margin-bottom: 16px;
  transition: all .5s ease;
  font-family: cursive;
  }
.btn::-moz-focus-inner {
  padding: 0;
  border: 0;
}
.link {
      width: 38px;
}
.btn--stripe {
  overflow: hidden;
  position: relative;
}
.btn--stripe:after {
  content: '';
  display: block;
  height: 7px;
  width: 100%;
  background-image: repeating-linear-gradient(45deg, #039be5, #039be5 1px, transparent 2px, transparent 5px);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-top: 1px solid #039be5;
  position: absolute;
  left: 0;
  bottom: 0;
  background-size: 7px 7px;
}
.btn--stripe:hover {
  background-color: #039be5;
  color: #fff;
  border-color: #013853;
}
.btn--stripe:hover:after {
  background-image: repeating-linear-gradient(45deg, #fff, #fff 1px, transparent 2px, transparent 5px);
  border-top: 1px solid #013853;
  -webkit-animation: stripe-slide 12s infinite linear forwards;
          animation: stripe-slide 12s infinite linear forwards;
}
.btn--large {
  width: 50%;
}
.btn--radius {
  border-radius: 36px;
}
</style>