Html Code: Button Border Effect on Hover

Simple but beautiful. This code creates a very simple button for you with an effect. When the button is hovered, its border changes dynamically and when the mouse goes out, the border returns to its initial state.For those who have a light website and avoid using complex elements, this will be attractive! Enjoy!

<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Poppins:700'>
<style>
body {
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}

body {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
          justify-content: center;
  height: 100vh;
  width: 100%;
  font-family: "Poppins", sans-serif;
  -webkit-font-smoothing: antialiased;
  background-color: #f2f2f2;
}

a {
  font-size: 1.5em;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration: none;
}

.btn {
  position: relative;
  display: inline-block;
  padding: 0.5em 2em;
  cursor: pointer;
  overflow: hidden;
}
.btn:before, .btn:after {
  content: "";
  position: absolute;
  left: 0;
  height: 2px;
  width: 100%;
  background-color: #252525;
}
.btn:before {
  top: 0;
}
.btn:after {
  bottom: 0;
}
.btn:hover > * > *:before, .btn:hover > * > *:after {
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
.btn:hover > * > * > *:before, .btn:hover > * > * > *:after {
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
.btn > *:before, .btn > *:after {
  content: "";
  position: absolute;
  top: 0;
  height: 100%;
  width: 2px;
  background-color: #252525;
}
.btn > *:before {
  left: 0;
}
.btn > *:after {
  right: 0;
}
.btn > * > *:before, .btn > * > *:after {
  content: "";
  position: absolute;
  left: 0;
  z-index: 9;
  height: 2px;
  width: 100%;
  background-color: #168dff;
}
.btn > * > *:before {
  top: 0;
  -webkit-transform: translate3d(-105%, 0, 0);
          transform: translate3d(-105%, 0, 0);
  -webkit-transition: -webkit-transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  transition: -webkit-transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn > * > *:after {
  bottom: 0;
  -webkit-transform: translate3d(105%, 0, 0);
          transform: translate3d(105%, 0, 0);
  -webkit-transition: -webkit-transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  transition: -webkit-transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn > * > * > *:before, .btn > * > * > *:after {
  content: "";
  position: absolute;
  top: 0;
  z-index: 9;
  height: 100%;
  width: 2px;
  background-color: #168dff;
}
.btn > * > * > *:before {
  left: 0;
  -webkit-transform: translate3d(0, 105%, 0);
          transform: translate3d(0, 105%, 0);
  -webkit-transition: -webkit-transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  transition: -webkit-transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn > * > * > *:after {
  right: 0;
  -webkit-transform: translate3d(0, -105%, 0);
          transform: translate3d(0, -105%, 0);
  -webkit-transition: -webkit-transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  transition: -webkit-transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
</style>

<a class="btn">
<span>
<span>
<span>Hover Me</span>
</span>
</span>
</a>

If you don't know how to use this code or need more information Click here!

Html Best Codes

Html Code: Button Border Effect on Hover

Links