Labs & Freebies Site Building

7 Free Hover Animated Buttons CSS for Web Design

February 14, 2017

A well designed button can be extremely beneficial for your website’s design. Using a unique button on your website can give your business a professional look, and increase conversions. 

Free CSS Button Code

We are always testing different code and creating new styles.

We like to share our ideas and give our readers free CSS, HTML, and JS code for certain projects and elements we create.

Below is a list of 10 free buttons and their code for free use in web designs.

You will see an example of each button, followed by the HTML and CSS needed to add them to your website.

To add these custom buttons to your website, simply copy the CSS and paste it in your stylesheet. Then copy the HTML and paste that on your page.

To change colors, font sizes, padding, or any other CSS elements, simply adjust the styling.

If you have any questions leave a comment below.

1BUTTON EXPAND CORNERS ON HOVER

<button class="btn1">HOVER ME</button>
.btn1{
  background-color: #fe0000;
  border: none;
  color: #ffffff;
  cursor: pointer;
  display: inline-block;
  font-size: 1em;
  font-size: 16px;
  line-height: 1em;
  margin: 45px 40px 20px;
  outline: none;
  padding: 22px 80px 20px;
  position: relative;
  text-transform: uppercase;
  font-weight: 700;
}
.btn1:before,
.btn1:after {
  border-color: transparent;
  -webkit-transition: all 0.25s;
  transition: all 0.25s;
  border-style: solid;
  border-width: 0;
  content: "";
  height: 24px;
  position: absolute;
  width: 24px;
}
.btn1:before {
  border-color: #fe0000;
  border-right-width: 2px;
  border-top-width: 2px;
  right: -5px;
  top: -5px;
}
.btn1:after {
  border-bottom-width: 2px;
  border-color: #fe0000;
  border-left-width: 2px;
  bottom: -5px;
  left: -5px;
}
.btn1:hover,
.btn1.hover {
  background-color: #db0202;
}
.btn1:hover:before,
.btn1.hover:before,
.btn1:hover:after,
.btn1.hover:after {
  height: 100%;
  width: 100%;
border-color: #db0202
}

2BUTTON UNDERLINE FROM MIDDLE ON HOVER

<button class="btn2">HOVER ME</button>
.btn2{
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  border: 2px solid #fe0000;
  color: #fe0000;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
  -webkit-transition: .3s;
  transition: .3s;
  background: transparent;
  font-weight: 700;
  margin: 45px 40px 20px;
 text-align: center;
 height: 45px;
 width: 170px;
 font-size: 16px;
 line-height: 35px
}
.btn2:after{
  position: absolute;
  -webkit-transition: .3s;
  transition: .3s;
  content: '';
  width: 0;
  left: 50%;
  bottom: 0;
  height: 3px;
  background: #fe0000;
}
.btn2:hover {
  cursor: pointer;
}
.btn2:hover:after {
  width: 100%;
  left: 0;
}

3BUTTON UNDERLINE FROM LEFT TO RIGHT ON HOVER

<button class="btn3">HOVER ME</button>
.btn3{
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  border: 2px solid #fe0000;
  color: #fe0000;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
  -webkit-transition: .3s;
  transition: .3s;
  background: transparent;
  font-weight: 700;
  margin: 45px 40px 20px;
  text-align: center;
  height: 45px;
  width: 170px;
  font-size: 16px;
 line-height: 35px
}
.btn3:after{
  position: absolute;
  -webkit-transition: .3s;
  transition: .3s;
  content: '';
  width: 0;
  left: 0;
  bottom: 0;
  height: 3px;
  background: #fe0000;
}
.btn3:hover {
  cursor: pointer;
}
.btn3:hover:after {
  width: 100%;
  left: 0;
}

4BUTTON ROUNDED CORNER ON HOVER EFFECT

<button class="btn4">HOVER ME</button>
.btn4{
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  margin: 45px 40px 20px;
  text-align: center;
  height: 45px;
  width: 170px;
  font-size: 16px;
  line-height: 35px;
  border: 2px solid #fe0000;
  font-weight: 700;
  color: #fe0000;
  background: transparent;
  text-align: center;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
  border-radius: 0px;
  -webkit-transition: .3s;
  transition: .3s;
}

.btn4:hover {
  border-radius: 30px;
}

5BUTTON GROW ON HOVER EFFECT

<button class="btn5">HOVER ME</button>
.btn5{
  margin: 45px 40px 20px;
  text-align: center;
  height: 45px;
  width: 170px;
  font-size: 16px;
  line-height: 35px;
  border: 2px solid #fe0000;
  background: transparent;
  text-align: center;
  text-transform: uppercase;
  position: relative;
  border-radius: 0px;
  -webkit-transition: .3s;
  transition: .3s;
  font-weight: 700;
  color: #fe0000;
}
.btn5:hover {
  width: 200px;
}

6BUTTON SHRINK ON HOVER EFFECT

<button class="btn6">HOVER ME</button>
.btn6{
  margin: 45px 40px 20px;
  text-align: center;
  height: 45px;
  width: 170px;
  font-size: 16px;
  line-height: 35px;
  border: 2px solid #fe0000;
  background: #fe0000;
  text-align: center;
  text-transform: uppercase;
  position: relative;
  border-radius: 0px;
  -webkit-transition: .3s;
  transition: .3s;
  font-weight: 700;
  color: #fff;
}
.btn6:hover {
  width: 120px;
}

7BUTTON SHRINK ON HOVER EFFECT

<button class="btn7">HOVER ME</button>
.btn7 {
  width: 170px;
  height: 45px;
  font-size: 16px;
  text-transform: uppercase;
  font-weight: 700;
  color: #fff;
  background: #fe0000;
  border: none;
  border-radius: 45px;
  box-shadow: 0px 8px 13px rgba(0, 0, 0, 0.34);
  transition: all ease .2s;
  cursor: pointer;
  outline: none;
}
.btn7:hover {
  background: #db0202;
  box-shadow: 0px 15px 20px rgba(254, 0, 0, 0.0);
}

Sign up for the DELT Magazine Newsletter

RELATED ARTICLES

4 Important Tips for Your Lead Page Design

DELT's guide to designing the perfect lead or squeeze page. Read More

11 Best Websites for Free Code Snippets & Resources

See DELT's list of the best websites for free code and snippets. Read More