7 Simple Button Hover States – Line Border Animation

29/08/2024 227 0

Suggest 7 simple button hover states featuring stylish line border animations. Fully coded using only HTML and CSS, these hover effects are perfect for enhancing your website’s interactivity. Download these free and easy-to-implement hover animations to add a modern touch to your web design projects.

Demo 7 Simple Button Hover States – Line Border Animation

(Hover these below buttons to view effects)

Center -> Out Line Left -> Right Line Left -> Right Line 2 Border Inner Border Outer Top -> Bottom Line Left -> Right Line 3

Download the full code here

Source code 7 Simple Button Hover States – Line Border Animation (HTML&CSS)

HTML

<div class="container-eg-btn-1">
  <a class="button button-1">Center -> Out Line</a>
  <a class="button button-2">Left -> Right Line</a>
  <a class="button button-3">Left -> Right Line 2</a>
  <a class="button button-4">Border Inner</a>
  <a class="button button-5">Border Outer</a>
  <a class="button button-6">Top -> Bottom Line</a>
  <a class="button button-7">Left -> Right Line 3</a>
</div>

CSS

.container-eg-btn-1 {
  font-family: sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
  margin: 0 auto 10px;
  padding: .5em;
  line-height: normal;
}
.container-eg-btn-1 .button {
  color: #FF9800;
  margin: 10px;
  padding: 12px 15px;
  border: 2px solid #FF9800;
  text-align: center;
  text-transform: uppercase;
  position: relative;
  overflow:hidden;
  transition: .3s;
  z-index: 1;
  background: #fff6e8;
  cursor: pointer;
}
.container-eg-btn-1 .button:after {
  position: absolute;
  transition: .3s;
  content: '';
  width: 0;
  left: 50%;
  bottom: 0;
  height: 4px;
  background: #FF9800;
}
.container-eg-btn-1 .button-2:after {
  left: 0;
}
.container-eg-btn-1 .button-3:after {
  right: 0;
  left: auto;
}
.container-eg-btn-1 .button-1:hover:after, .container-eg-btn-1 .button-2:hover:after, .container-eg-btn-1 .button-3:hover:after {
  width: 100%;
  left: 0;
}
.container-eg-btn-1 .button-4:hover {
  box-shadow: inset 0px 0px 0px 4px #FF9800;
}
.container-eg-btn-1 .button-4:hover:after {
  width: 0%;
}
.container-eg-btn-1 .button-5:hover {
  box-shadow: 0px 0px 0px 4px #FF9800;
}
.container-eg-btn-1 .button-5:hover:after {
  width: 0%;
}
.container-eg-btn-1 .button-6:after {
  left: 0;
  bottom: auto;
  top: -4px;
  width: 100%;
}
.container-eg-btn-1 .button-6:hover:after {
  top: calc(100% - 4px);
}
.container-eg-btn-1 .button-7:after {
  top: 0;
  right: auto;
  left: -4px;
  height: 100%;
  width: 4px;
}
.container-eg-btn-1 .button-7:hover:after {
  left: calc(100% - 4px);
}