Button Border Effect on Hover

Written by @kerixa 28 August 2020

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!

Code Snippet:

                                                
                                                <!-- this script is provided by https://www.htmlfreecode.com coded by: Kerixa Inc. -->
<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><a target='_blank' href='https://www.htmlfreecode.com' style='font-size: 8pt; text-decoration: none'>Html Free Codes</a>

Example:

About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!

Comments

Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300