Fancy Buttons with Amazing Hover Effects

In this example below you will see how to do a Fancy Buttons with Amazing Hover Effects with some HTML / CSS and Javascript

Some Fancy buttons with awesome hover effects using CSS3.

Thumbnail
This awesome code was written by ahmedbeheiry, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright ahmedbeheiry ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Fancy Buttons with Amazing Hover Effects</title>
  <link href="https://fonts.googleapis.com/css?family=Cormorant+Garamond:700" rel="stylesheet">

<link href="https://fonts.googleapis.com/css?family=Roboto:500" rel="stylesheet">

<link href="https://fonts.googleapis.com/css?family=Open+Sans:300" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <h1>Fancy Buttons</h1>
<p>Hover over any button and enjoy the magic.</p>
<div class="buttons-coll">
  <button class="custom-btn btn-1">Read More</button>
  <button class="custom-btn btn-2">Read More</button>
  <button class="custom-btn btn-3"><span>Read More</span></button>
  <button class="custom-btn btn-4"><span>Read More</span></button>
  <button class="custom-btn btn-5"><span>Read More</span></button>
  <button class="custom-btn btn-6"><span>Read More</span></button>
  <button class="custom-btn btn-7">Read More</button>
  <button class="custom-btn btn-8">Read More</button>
  <button class="custom-btn btn-9">Read More</button>
  <button class="custom-btn btn-10">Read More</button>
  <button class="custom-btn btn-11">Read More</button>
  <button class="custom-btn btn-12">Read More</button>
</div>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/ahmedbeheiry/fancy-buttons-with-amazing-hover-effects-aBdezY */
body {background: #f2f2f2;}
h1 {
  position: relative;
  text-align: center;
  color: #353535;
  font-size: 50px;
  font-family: 'Cormorant Garamond', serif;
}
h1:before {
  position: absolute;
  content: '';
  bottom: -20px;
  width: 150px;
  height: 2px;
  background: #e74c3c;
}
p {
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  text-align: center;
  color: #676767;
}
.buttons-coll {
  width: 90%;
  margin: 50px auto;
  text-align: center;
}
button {
  margin: 20px;
}
.custom-btn {
  padding: 10px 25px;
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  background: transparent;
  outline: none !important;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
}
/**** BTN No. 1 ****/
.btn-1 {border: 2px solid #000;}
.btn-1:hover {
  background: #000;
  color: #fff;
}
.btn-1:active {top: 2px;}

/**** BTN No. 2 ****/
.btn-2 {
  border: none;
  border-bottom: 2px solid #000;
  border-left: 2px solid #000;
}
.btn-2:before, .btn-2:after {
  position: absolute;
  content: "";
  right: 0;
  top: 0;
  background: #000;
  transition: all 0.3s ease;
}
.btn-2:before {
  height: 0%;
  width: 2px;
}
.btn-2:after {
  width: 0%;
  height: 2px;
}
.btn-2:hover:before {height: 100%;}
.btn-2:hover:after {width: 100%;}

/**** BTN No. 3 ****/
.btn-3 {
  width: 130px;
  height: 40px;
  line-height: 42px;
  padding: 0;
  border: none;
}
.btn-3 span {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.btn-3:before, .btn-3:after {
  position: absolute;
  content: "";
  right: 0;
  top: 0;
  background: #000;
  transition: all 0.3s ease;
}
.btn-3:before {
  height: 0%;
  width: 2px;
}
.btn-3:after {
  width: 0%;
  height: 2px;
}
.btn-3:hover:before {height: 100%;}
.btn-3:hover:after {width: 100%;}
.btn-3 span:before, .btn-3 span:after {
  position: absolute;
  content: "";
  left: 0;
  bottom: 0;
  background: #000;
  transition: all 0.3s ease;
}
.btn-3 span:before {
  width: 2px;
  height: 0%;
}
.btn-3 span:after {
  width: 0%;
  height: 2px;
}
.btn-3 span:hover:before {height: 100%;}
.btn-3 span:hover:after {width: 100%;}

/**** BTN No. 4 ****/
.btn-4 {
  width: 130px;
  height: 40px;
  line-height: 42px;
  padding: 0;
  border: none;
}
.btn-4 span {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.btn-4:before, .btn-4:after {
  position: absolute;
  content: "";
  right: 0;
  top: 0;
  background: #000;
  transition: all 0.3s ease;
}
.btn-4:before {
  height: 50%;
  width: 2px;
}
.btn-4:after {
  width: 20%;
  height: 2px;
}
.btn-4:hover:before {height: 100%;}
.btn-4:hover:after {width: 100%;}
.btn-4 span:before, .btn-4 span:after {
  position: absolute;
  content: "";
  left: 0;
  bottom: 0;
  background: #000;
  transition: all 0.3s ease;
}
.btn-4 span:before {
  width: 2px;
  height: 50%;
}
.btn-4 span:after {
  width: 20%;
  height: 2px;
}
.btn-4 span:hover:before {height: 100%;}
.btn-4 span:hover:after {width: 100%;}

/**** BTN No. 5 ****/
.btn-5 {
  width: 130px;
  height: 40px;
  line-height: 42px;
  padding: 0;
  border: none;
}
.btn-5 span {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.btn-5:before, .btn-5:after {
  position: absolute;
  content: "";
  right: 0;
  bottom: 0;
  background: #000;
  transition: all 0.3s ease;
}
.btn-5:before {
  height: 50%;
  width: 2px;
}
.btn-5:after {
  width: 20%;
  height: 2px;
}
.btn-5:hover:before {height: 100%;}
.btn-5:hover:after {width: 100%;}
.btn-5 span:before, .btn-5 span:after {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  background: #000;
  transition: all 0.3s ease;
}
.btn-5 span:before {
  width: 2px;
  height: 50%;
}
.btn-5 span:after {
  width: 20%;
  height: 2px;
}
.btn-5 span:hover:before {height: 100%;}
.btn-5 span:hover:after {width: 100%;}

/**** BTN No. 6 ****/
.btn-6 {
  width: 130px;
  height: 40px;
  line-height: 42px;
  padding: 0;
  border: none;
}
.btn-6 span {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.btn-6:before, .btn-6:after {
  position: absolute;
  content: "";
  height: 0%;
  width: 2px;
  background: #000;
}
.btn-6:before {
  right: 0;
  top: 0;
  transition: all 0.1s ease;
}
.btn-6:after {
  left: 0;
  bottom: 0;
  transition: all 0.1s 0.2s ease;
}
.btn-6:hover:before {
  transition: all 0.1s 0.2s ease;
  height: 100%;
}
.btn-6:hover:after {
  transition: all 0.1s ease;
  height: 100%;
}
.btn-6 span:before, .btn-6 span:after {
  position: absolute;
  content: "";
  background: #000;
}
.btn-6 span:before {
  left: 0;
  top: 0;
  width: 0%;
  height: 2px;
  transition: all 0.1s 0.1s ease;
}
.btn-6 span:after {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
}
.btn-6 span:hover:before {width: 100%;}

/**** BTN No. 7 ****/
.btn-7 {
  border: 2px solid #000;
  transition: all 0.3s ease;
  background: #f2f2f2;
}
.btn-7:before {
  position: absolute;
  content: ' ';
  z-index: -1;
  width: 25%;
  top: 50%;
  left: -15%;
  height: 2px;
  background: #000;
  transition: all 0.3s ease;
}
.btn-7:hover {
  background: #000;
  color: #fff;
  border-color: #000;
  padding-left: 30px;
  padding-right: 20px;
}
.btn-7:hover:before {left: -10%;}


/**** BTN No. 8 ****/
.btn-8 {
  padding-left: 30px;
  padding-right: 20px;
  background: #f2f2f2;
  border: 2px solid #000;
  transition: all 0.3s ease;
}
.btn-8:before {
  position: absolute;
  content: ' ';
  z-index: -1;
  width: 25%;
  top: 50%;
  left: -10%;
  height: 2px;
  background: #000;
  transition: all 0.3s ease;
}
.btn-8:hover {
  background: #000;
  color: #fff;
  border-color: transparent;
  padding-left: 25px;
  padding-right: 25px;
}
.btn-8:hover:before {left: -15%;}

/**** BTN No. 9 ****/
.btn-9 {
  background: #f2f2f2;
  border: 2px solid #000;
  transition: all 0.3s ease;
}
.btn-9:before, .btn-9:after {
  position: absolute;
  content: ' ';
  z-index: -1;
  width: 25%;
  top: 50%;
  height: 2px;
  background: #000;
  transition: all 0.3s ease;
}
.btn-9:before {left: -10%;}
.btn-9:after {right: -10%}
.btn-9:hover {
  background: #000;
  color: #fff;
}
.btn-9:hover:before {left: -15%;}
.btn-9:hover:after {right: -15%;}


/**** BTN No. 10 ****/
.btn-10 {
  background: #f2f2f2;
  border: 2px solid #000;
  transition: all 0.3s ease;
}
.btn-10:before, .btn-10:after {
  position: absolute;
  content: ' ';
  z-index: -1;
  width: 25%;
  top: 50%;
  height: 2px;
  background: #000;
  transition: all 0.3s ease;
}
.btn-10:before {left: -15%;}
.btn-10:after {right: -15%}
.btn-10:hover {
  background: #000;
  color: #fff;
}
.btn-10:hover:before {left: -10%;}
.btn-10:hover:after {right: -10%;}


/**** BTN No. 11 ****/
.btn-11 {
  background: #f2f2f2;
  border: 2px solid #000;
  transition: all 0.3s ease;
}
.btn-11:before, .btn-11:after {
  position: absolute;
  content: ' ';
  z-index: -1;
  width: 25%;
  top: 50%;
  height: 2px;
  background: #000;
  transition: all 0.3s ease;
}
.btn-11:before {left: -10%;}
.btn-11:after {right: -10%}
.btn-11:hover {
  background: #000;
  color: #fff;
}
.btn-11:hover:before {left: 0%;}
.btn-11:hover:after {right: 0%;}


/**** BTN No. 12 ****/
.btn-12 {
  border: 2px solid #000;
  z-index: 1;
}
.btn-12:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  background: #000;
  transition: all 0.3s ease;
}
.btn-12:hover {
  color: #fff;
}
.btn-12:hover:after {
  top: 0;
  height: 100%;
}
.btn-12:active {top: 2px;}

/*Downloaded from https://www.codeseek.co/ahmedbeheiry/fancy-buttons-with-amazing-hover-effects-aBdezY */
// All of these buttons designed by me: Ahmed Beheiry

// find me on 
// My Website: http://www.ahmedbeheiry.tk/
// FB: https://www.facebook.com/Ahmed.Beheiryy
// Linkedin: https://eg.linkedin.com/in/ahmedbeheiry

/********** Thanks for being here **********/

Comments