10+ CSS Button Hover Effects

This post contains a total of 10+ Hand-Picked CSS Button Hover effect Examples with Source Code. All the buttons have hover effects and are made using CSS.

You can use the source code of these examples for educational purpose with credits to the original owner.

Related Posts

Click a Code to Copy it.

1. By Daniel Gonzalez

Made by Daniel Gonzalez. Sliding CSS Button Hover effect. ( Source )

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

<style>
@import url("https://fonts.googleapis.com/css?family=Lato:400,700");
body, html {
  height: 100%;
}

body {
  font-family: "Lato", sans-serif;
  color: #333333;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
}

.container {
  width: auto;
  margin: auto;
}

a {
  text-transform: uppercase;
  text-decoration: none;
  font-weight: 700;
}

.btn {
  position: relative;
  letter-spacing: 0.25em;
  margin: 0 auto;
  padding: 1rem 2.5rem;
  background: transparent;
  outline: none;
  font-size: 28px;
  color: #333333;
}
.btn::after, .btn::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 50%;
  transform: skewX(30deg);
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  z-index: -2;
}
.btn::before {
  background-color: #ffff00;
  top: -1rem;
  left: 0rem;
}
.btn::after {
  background-color: #8a19ff;
  top: 1rem;
  left: 8rem;
}
.btn:hover::before, .btn:hover::after {
  top: 0;
  transform: skewx(0deg);
}
.btn:hover::after {
  left: 0rem;
}
.btn:hover::before {
  left: 8.75rem;
}
</style>
</head>
<body>
  <div class="container"><a class="btn" href="#">hover me</a></div>
</body>
</html>

2. By Kyle Brumm

Made by Kyle Brumm. Line Button Hover Effects. ( Source )

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400|Raleway:300);
*,
*:before,
*:after {
  box-sizing: border-box;
}

html {
  font-family: "Open Sans", Helvetica, arial, sans-serif;
  background-color: #eeeeee;
}

h1, h2, h3,
h4, h5, h6 {
  font-family: "Raleway", "Open Sans", sans-serif;
}

a {
  text-decoration: none;
  color: black;
}

.container {
  overflow: hidden;
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  padding: 2rem 1rem;
  text-align: center;
}

.col {
  padding: 1rem;
}
@media (min-width: 500px) {
  .col {
    width: 50%;
    float: left;
  }
  .col:nth-of-type(2n+1) {
    clear: left;
  }
}

.btn-1 {
  color: #ac7c48 !important;
}

.btn-2 {
  color: #90877e !important;
}

.btn-3 {
  color: #816595 !important;
}

.btn-4 {
  color: #4c6350 !important;
}

.btn-5 {
  color: #83975a !important;
}

.btn-6 {
  color: #a09a53 !important;
}

.btn-7 {
  color: #3c6fa2 !important;
}

.btn-8 {
  color: #4d534e !important;
}

.btn {
  display: block;
  position: relative;
  overflow: hidden;
  padding: 1.5rem;
  text-decoration: none;
}
.btn:before, .btn:after,
.btn .btn--inner:before,
.btn .btn--inner:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  background-color: currentColor;
  transition: 0.3s ease-in-out;
}

.btn--cw:after,
.btn--ccw:after,
.btn--cw-tlbr:after,
.btn--ccw-tlbr:after,
.btn--cw-trbl:after,
.btn--ccw-trbl:after {
  top: auto;
  right: 0;
  bottom: 0;
  left: auto;
}
.btn--cw .btn--inner:before,
.btn--ccw .btn--inner:before,
.btn--cw-tlbr .btn--inner:before,
.btn--ccw-tlbr .btn--inner:before,
.btn--cw-trbl .btn--inner:before,
.btn--ccw-trbl .btn--inner:before {
  right: 0;
  left: auto;
}
.btn--cw .btn--inner:after,
.btn--ccw .btn--inner:after,
.btn--cw-tlbr .btn--inner:after,
.btn--ccw-tlbr .btn--inner:after,
.btn--cw-trbl .btn--inner:after,
.btn--ccw-trbl .btn--inner:after {
  top: auto;
  bottom: 0;
}

.btn--cw:before, .btn--cw:after {
  width: 0;
  height: 2px;
}
.btn--cw .btn--inner:before,
.btn--cw .btn--inner:after {
  width: 2px;
  height: 0;
}
.btn--cw:hover:before, .btn--cw:hover:after {
  width: 100%;
}
.btn--cw:hover .btn--inner:before,
.btn--cw:hover .btn--inner:after {
  height: 100%;
}

.btn--ccw:before, .btn--ccw:after {
  width: 2px;
  height: 0;
}
.btn--ccw .btn--inner:before,
.btn--ccw .btn--inner:after {
  width: 0;
  height: 2px;
}
.btn--ccw:hover:before, .btn--ccw:hover:after {
  height: 100%;
}
.btn--ccw:hover .btn--inner:before,
.btn--ccw:hover .btn--inner:after {
  width: 100%;
}

.btn--tlbr:before, .btn--tlbr:after {
  width: 0;
  height: 2px;
}
.btn--tlbr:after,
.btn--tlbr .btn--inner:after {
  top: auto;
  right: 0;
  bottom: 0;
  left: auto;
}
.btn--tlbr .btn--inner:before,
.btn--tlbr .btn--inner:after {
  width: 2px;
  height: 0;
}
.btn--tlbr:hover:before, .btn--tlbr:hover:after {
  width: 100%;
}
.btn--tlbr:hover .btn--inner:before,
.btn--tlbr:hover .btn--inner:after {
  height: 100%;
}

.btn--trbl:before, .btn--trbl:after {
  width: 0;
  height: 2px;
}
.btn--trbl:before,
.btn--trbl .btn--inner:before {
  right: 0;
  left: auto;
}
.btn--trbl:after,
.btn--trbl .btn--inner:after {
  top: auto;
  bottom: 0;
}
.btn--trbl .btn--inner:before,
.btn--trbl .btn--inner:after {
  width: 2px;
  height: 0;
}
.btn--trbl:hover:before, .btn--trbl:hover:after {
  width: 100%;
}
.btn--trbl:hover .btn--inner:before,
.btn--trbl:hover .btn--inner:after {
  height: 100%;
}

.btn--cw-tlbr:before, .btn--cw-tlbr:after,
.btn--cw-tlbr .btn--inner:before,
.btn--cw-tlbr .btn--inner:after,
.btn--ccw-tlbr:before,
.btn--ccw-tlbr:after,
.btn--ccw-tlbr .btn--inner:before,
.btn--ccw-tlbr .btn--inner:after,
.btn--cw-trbl:before,
.btn--cw-trbl:after,
.btn--cw-trbl .btn--inner:before,
.btn--cw-trbl .btn--inner:after,
.btn--ccw-trbl:before,
.btn--ccw-trbl:after,
.btn--ccw-trbl .btn--inner:before,
.btn--ccw-trbl .btn--inner:after {
  transition: 0.15s ease-in-out;
}

.btn--cw-tlbr:before, .btn--cw-tlbr:after {
  width: 0;
  height: 2px;
  transition-delay: 0.15s;
}
.btn--cw-tlbr .btn--inner:before,
.btn--cw-tlbr .btn--inner:after {
  width: 2px;
  height: 0;
  transition-delay: 0s;
}
.btn--cw-tlbr:hover:before, .btn--cw-tlbr:hover:after {
  width: 100%;
  transition-delay: 0s;
}
.btn--cw-tlbr:hover .btn--inner:before,
.btn--cw-tlbr:hover .btn--inner:after {
  height: 100%;
  transition-delay: 0.15s;
}

.btn--ccw-tlbr:before, .btn--ccw-tlbr:after {
  width: 2px;
  height: 0;
  transition-delay: 0.15s;
}
.btn--ccw-tlbr .btn--inner:before,
.btn--ccw-tlbr .btn--inner:after {
  width: 0;
  height: 2px;
  transition-delay: 0s;
}
.btn--ccw-tlbr:hover:before, .btn--ccw-tlbr:hover:after {
  height: 100%;
  transition-delay: 0s;
}
.btn--ccw-tlbr:hover .btn--inner:before,
.btn--ccw-tlbr:hover .btn--inner:after {
  width: 100%;
  transition-delay: 0.15s;
}

.btn--cw-trbl:before, .btn--cw-trbl:after {
  width: 0;
  height: 2px;
  transition-delay: 0s;
}
.btn--cw-trbl .btn--inner:before,
.btn--cw-trbl .btn--inner:after {
  width: 2px;
  height: 0;
  transition-delay: 0.15s;
}
.btn--cw-trbl:hover:before, .btn--cw-trbl:hover:after {
  width: 100%;
  transition-delay: 0.15s;
}
.btn--cw-trbl:hover .btn--inner:before,
.btn--cw-trbl:hover .btn--inner:after {
  height: 100%;
  transition-delay: 0s;
}

.btn--ccw-trbl:before, .btn--ccw-trbl:after {
  width: 2px;
  height: 0;
  transition-delay: 0s;
}
.btn--ccw-trbl .btn--inner:before,
.btn--ccw-trbl .btn--inner:after {
  width: 0;
  height: 2px;
  transition-delay: 0.15s;
}
.btn--ccw-trbl:hover:before, .btn--ccw-trbl:hover:after {
  height: 100%;
  transition-delay: 0.15s;
}
.btn--ccw-trbl:hover .btn--inner:before,
.btn--ccw-trbl:hover .btn--inner:after {
  width: 100%;
  transition-delay: 0s;
}
</style>
</head>
<body>
  <div class="container">
    <h1>Line Button<br>Hover Effects</h1>
    <h4>By: <a href="http://kylebrumm.com" target="_blank">Kyle Brumm</a></h4>

    <div class="col">
        <a href="#" class="btn btn-1 btn--cw">
            <code class="btn--inner">.btn--cw</code>
        </a>
    </div>
    
    <div class="col">
        <a href="#" class="btn btn-2 btn--ccw">
            <code class="btn--inner">.btn--ccw</code>
        </a>
    </div>
    
    <div class="col">
        <a href="#" class="btn btn-3 btn--tlbr">
            <code class="btn--inner">.btn--tlbr</code>
        </a>
    </div>
    
    <div class="col">
        <a href="#" class="btn btn-4 btn--trbl">
            <code class="btn--inner">.btn--trbl</code>
        </a>
    </div>
    
    <div class="col">
        <a href="#" class="btn btn-5 btn--cw-tlbr">
            <code class="btn--inner">.btn--cw-tlbr</code>
        </a>
    </div>
    
    <div class="col">
        <a href="#" class="btn btn-6 btn--ccw-tlbr">
            <code class="btn--inner">.btn--ccw-tlbr</code>
        </a>
    </div>
    
    <div class="col">
        <a href="#" class="btn btn-7 btn--cw-trbl">
            <code class="btn--inner">.btn--cw-trbl</code>
        </a>
    </div>
    
    <div class="col">
        <a href="#" class="btn btn-8 btn--ccw-trbl">
            <code class="btn--inner">.btn--ccw-trbl</code>
        </a>
    </div>
</div>
</body>
</html>

3. By abadu

Made by abadu. Text Sliding Button hover effect. ( Source )

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>

<style>
@import url("https://fonts.googleapis.com/css?family=Roboto:900");
body {
  background: #111;
}

a {
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  color: black;
  text-decoration: none;
}

.centered {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.h-button {
  background: white;
  padding: 20px;
  width: 250px;
  text-align: center;
}
.h-button span {
  display: inline-block;
  min-width: 0.3em;
  text-transform: uppercase;
  transition: 0.25s cubic-bezier(0.5, -1, 0.5, 2);
  opacity: 0;
  transform: translate(0, -20px);
}
.h-button:before {
  content: attr(data-text);
  position: absolute;
  width: 100%;
  left: 0;
  transition: 0.25s cubic-bezier(0.5, -1, 0.5, 2);
  text-transform: uppercase;
  letter-spacing: 3.5px;
  opacity: 1;
  transform: translate(0, 0px);
}
.h-button:hover:before, .h-button:focus:before {
  opacity: 0;
  transform: translate(0, 20px);
}
.h-button:hover span, .h-button:focus span {
  opacity: 1;
  transform: translate(0, 0);
}
.h-button:hover span:nth-child(1), .h-button:focus span:nth-child(1) {
  transition-delay: 0.025s;
}
.h-button:hover span:nth-child(2), .h-button:focus span:nth-child(2) {
  transition-delay: 0.05s;
}
.h-button:hover span:nth-child(3), .h-button:focus span:nth-child(3) {
  transition-delay: 0.075s;
}
.h-button:hover span:nth-child(4), .h-button:focus span:nth-child(4) {
  transition-delay: 0.1s;
}
.h-button:hover span:nth-child(5), .h-button:focus span:nth-child(5) {
  transition-delay: 0.125s;
}
.h-button:hover span:nth-child(6), .h-button:focus span:nth-child(6) {
  transition-delay: 0.15s;
}
</style>
</head>
<body>
  <a aria-label='Thanks' class='h-button centered' data-text='Hover me' href='#'>
  <span>T</span>
  <span>h</span>
  <span>a</span>
  <span>n</span>
  <span>k</span>
  <span>s</span>
</a>
</body>
</html>

4. By Julia

Made by Julia. A simple pure CSS hover effect. ( Source )

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title> 
<style>
@import url('https://fonts.googleapis.com/css?family=Amatic+SC');

body {
	margin: 0;
	height: 100%;
	background-image: linear-gradient(to top, #d9afd9 0%, #97d9e1 100%);
	background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

.button_container {
	position: absolute;
  left: 0;
  right: 0;
  top: 30%;
}

.description, .link {
  font-family: 'Amatic SC', cursive;
  text-align: center;
}

.description {
	font-size: 35px;
}

.btn {
  border: none;
  display: block;
  text-align: center;
  cursor: pointer;
  text-transform: uppercase;
  outline: none;
  overflow: hidden;
  position: relative;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  background-color: #222;
  padding: 17px 60px;
  margin: 0 auto;
  box-shadow: 0 5px 15px rgba(0,0,0,0.20);
}

.btn span {
  position: relative; 
  z-index: 1;
}

.btn:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 490%;
  width: 140%;
  background: #78c7d2;
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
  -webkit-transform: translateX(-98%) translateY(-25%) rotate(45deg);
  transform: translateX(-98%) translateY(-25%) rotate(45deg);
}

.btn:hover:after {
  -webkit-transform: translateX(-9%) translateY(-25%) rotate(45deg);
  transform: translateX(-9%) translateY(-25%) rotate(45deg);
}

.link {
  font-size: 20px;
  margin-top: 30px;
}

.link a {
  color: #000;
  font-size: 25px; 
}
</style>
</head>
<body>
  <div class="button_container">
	<p class="description">A simple pure CSS hover effect</p>
	<button class="btn"><span>Hover me!</span></button>
</div>
</body>
</html>

5. By Chris Ota

Made by Chris Ota. ( Source )

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link href='https://fonts.googleapis.com/css?family=Noto+Sans' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
  <link rel='stylesheet' href='//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css'>
  
<style>
*, *:before, *:after {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  width: 100%;
}

body {
  background: #222;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: "Noto Sans", sans-serif;
}

a {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid #EE3769;
  border-radius: 8px;
  height: 2.8em;
  width: 10em;
  padding: 0;
  outline: none;
  overflow: hidden;
  color: #EE3769;
  transition: color 0.3s 0.1s ease-out;
  text-align: center;
  line-height: 250%;
}
a::before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  content: "";
  border-radius: 50%;
  display: block;
  width: 20em;
  height: 20em;
  line-height: 20em;
  left: -5em;
  text-align: center;
  transition: box-shadow 0.5s ease-out;
  z-index: -1;
}
a:hover {
  color: #fff;
}
a:hover::before {
  box-shadow: inset 0 0 0 10em #ee3769;
}
</style>
</head>
<body>
  <a href="https://www.dribbble.com/chrisota" title="Chris Ota Dribbble"><i class="fa fa-dribbble"></i> Dribbble</a>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
</body>
</html>

6. By jayhansim

Made by jayhansim. Circle button hover effect. ( Source )

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  
<style>
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  background-color: #292929;
  color: #ffb600;
  padding: 20px;
  text-align: center;
}

a {
  color: #ffb600;
  text-decoration: none;
}
a:hover {
  color: #ffd366;
}

.inner {
  width: 600px;
  margin: 0 auto;
}

.activity {
  padding: 0;
  margin: 2em 0;
  list-style: none;
}
.activity li {
  -webkit-transition: box-shadow 0.2s ease;
  -moz-transition: box-shadow 0.2s ease;
  transition: box-shadow 0.2s ease;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 50%;
  color: #ffb600;
  display: inline-block;
  font-size: .889em;
  height: 8em;
  margin: 0 1em 1em;
  position: relative;
  text-align: center;
  text-transform: lowercase;
  width: 8em;
  line-height: 8em;
}
.activity li a {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.activity li:hover {
  box-shadow: 0 0 0 7px #fff;
}
.activity li:hover:before {
  -webkit-transform: scale(0.925);
  -moz-transform: scale(0.925);
  -ms-transform: scale(0.925);
  -o-transform: scale(0.925);
  transform: scale(0.925);
  box-shadow: 0 0 0 1px #fff;
  opacity: .5;
}
.activity li:before {
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  transition: all 0.2s ease;
  border-radius: 50%;
  bottom: 0;
  box-shadow: 0 0 0 1px #fff;
  content: '';
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}
</style>
</head>
<body>
<h1>Hover effect at "Activities"</h1>
<section>
  <div class="inner">
    <ul class="activity">
      <li>
        <a href="#">Archery</a>
      </li>
      <li>
        <a href="#">baking</a>
      </li>
      <li>
        <a href="#">calligraphy</a>
      </li>
      <li>
        <a href="#">charcoal</a>
      </li>
    </ul>
  </div>
</section>
</body>
</html>

7. By Giana

Made by Giana. Multiple Button hover effects with box-shadow. ( Source )

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link href="https://fonts.googleapis.com/css?family=Fira+Sans:300" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  
<style>
.fill:hover,
.fill:focus {
  box-shadow: inset 0 0 0 2em var(--hover);
}

.pulse:hover,
.pulse:focus {
  -webkit-animation: pulse 1s;
          animation: pulse 1s;
  box-shadow: 0 0 0 2em transparent;
}

@-webkit-keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 var(--hover);
  }
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 var(--hover);
  }
}
.close:hover,
.close:focus {
  box-shadow: inset -3.5em 0 0 0 var(--hover), inset 3.5em 0 0 0 var(--hover);
}

.raise:hover,
.raise:focus {
  box-shadow: 0 0.5em 0.5em -0.4em var(--hover);
  transform: translateY(-0.25em);
}

.up:hover,
.up:focus {
  box-shadow: inset 0 -3.25em 0 0 var(--hover);
}

.slide:hover,
.slide:focus {
  box-shadow: inset 6.5em 0 0 0 var(--hover);
}

.offset {
  box-shadow: 0.3em 0.3em 0 0 var(--color), inset 0.3em 0.3em 0 0 var(--color);
}
.offset:hover, .offset:focus {
  box-shadow: 0 0 0 0 var(--hover), inset 6em 3.5em 0 0 var(--hover);
}

.fill {
  --color: #a972cb;
  --hover: #cb72aa;
}

.pulse {
  --color: #ef6eae;
  --hover: #ef8f6e;
}

.close {
  --color: #ff7f82;
  --hover: #ffdc7f;
}

.raise {
  --color: #ffa260;
  --hover: #e5ff60;
}

.up {
  --color: #e4cb58;
  --hover: #94e458;
}

.slide {
  --color: #8fc866;
  --hover: #66c887;
}

.offset {
  --color: #19bc8b;
  --hover: #1973bc;
}

button {
  color: var(--color);
  transition: 0.25s;
}
button:hover, button:focus {
  border-color: var(--hover);
  color: #fff;
}

body {
  color: #fff;
  background: #17181c;
  font: 300 1em "Fira Sans", sans-serif;
  justify-content: center;
  align-content: center;
  align-items: center;
  text-align: center;
  min-height: 100vh;
  display: flex;
}

button {
  background: none;
  border: 2px solid;
  font: inherit;
  line-height: 1;
  margin: 0.5em;
  padding: 1em 2em;
}

h1 {
  font-weight: 400;
}

code {
  color: #e4cb58;
  font: inherit;
}
</style>
</head>
<body>
  <div class="buttons">
  <h1>Simple hover effects with <code>box-shadow</code></h1>
  <button class="fill">Fill In</button>
  <button class="pulse">Pulse</button>
  <button class="close">Close</button>
  <button class="raise">Raise</button>
  <button class="up">Fill Up</button>
  <button class="slide">Slide</button>
  <button class="offset">Offset</button>
</div>
</body>
</html>

8. By Katherine Kato

Made by Katherine Kato. Sliding hover effect button. ( Source )

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>

<style>
@import url("https://fonts.googleapis.com/css?family=Mukta:700");
* {
  box-sizing: border-box;
}
*::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: "Mukta", sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  min-height: 100vh;
  background: #f3f8fa;
}

button {
  position: relative;
  display: inline-block;
  cursor: pointer;
  outline: none;
  border: 0;
  vertical-align: middle;
  text-decoration: none;
  background: transparent;
  padding: 0;
  font-size: inherit;
  font-family: inherit;
}
button.learn-more {
  width: 12rem;
  height: auto;
}
button.learn-more .circle {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: relative;
  display: block;
  margin: 0;
  width: 3rem;
  height: 3rem;
  background: #282936;
  border-radius: 1.625rem;
}
button.learn-more .circle .icon {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  background: #fff;
}
button.learn-more .circle .icon.arrow {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  left: 0.625rem;
  width: 1.125rem;
  height: 0.125rem;
  background: none;
}
button.learn-more .circle .icon.arrow::before {
  position: absolute;
  content: "";
  top: -0.25rem;
  right: 0.0625rem;
  width: 0.625rem;
  height: 0.625rem;
  border-top: 0.125rem solid #fff;
  border-right: 0.125rem solid #fff;
  transform: rotate(45deg);
}
button.learn-more .button-text {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.75rem 0;
  margin: 0 0 0 1.85rem;
  color: #282936;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
  text-transform: uppercase;
}
button:hover .circle {
  width: 100%;
}
button:hover .circle .icon.arrow {
  background: #fff;
  transform: translate(1rem, 0);
}
button:hover .button-text {
  color: #fff;
}

@supports (display: grid) {
  body {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 0.625rem;
    grid-template-areas: ". main main ." ". main main .";
  }

  #container {
    grid-area: main;
    align-self: center;
    justify-self: center;
  }
}
</style>
</head>
<body>
  <div id="container">
  <button class="learn-more">
    <span class="circle" aria-hidden="true">
      <span class="icon arrow"></span>
    </span>
    <span class="button-text">Learn More</span>
  </button>
</div>
</body>
</html>

9. By Aaron Iker

Made by Aaron Iker. Button with Sliding text on hover effect. ( Source )

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:400,500,700&amp;display=swap'>
  
<style>
.button.dark {
  --background: #2F3545;
  --shadow: 0 2px 8px -1px rgba(21, 25, 36, 0.32);
  --shadow-hover: 0 4px 20px -2px rgba(21, 25, 36, 0.5);
}
.button.white {
  --background: #fff;
  --text: #275efe;
  --shadow: 0 2px 8px -1px rgba(18, 22, 33, 0.04);
  --shadow-hover: 0 4px 20px -2px rgba(18, 22, 33, 0.12);
}
.button.fast {
  --duration: .32s;
}

.button {
  --background: #275efe;
  --text: #fff;
  --font-size: 16px;
  --duration: .44s;
  --move-hover: -4px;
  --shadow: 0 2px 8px -1px rgba(39, 94, 254, 0.32);
  --shadow-hover: 0 4px 20px -2px rgba(39, 94, 254, 0.5);
  --font-shadow: var(--font-size);
  padding: 16px 32px;
  font-family: "Roboto";
  font-weight: 500;
  line-height: var(--font-size);
  border-radius: 24px;
  display: block;
  outline: none;
  text-decoration: none;
  font-size: var(--font-size);
  letter-spacing: 0.5px;
  background: var(--background);
  color: var(--text);
  box-shadow: var(--shadow);
  transform: translateY(var(--y)) translateZ(0);
  transition: transform var(--duration) ease, box-shadow var(--duration) ease;
}
.button div {
  display: flex;
  overflow: hidden;
  text-shadow: 0 var(--font-shadow) 0 var(--text);
}
.button div span {
  display: block;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  font-style: normal;
  transition: transform var(--duration) ease;
  transform: translateY(var(--m)) translateZ(0);
}
.button div span:nth-child(1) {
  transition-delay: 0.05s;
}
.button div span:nth-child(2) {
  transition-delay: 0.1s;
}
.button div span:nth-child(3) {
  transition-delay: 0.15s;
}
.button div span:nth-child(4) {
  transition-delay: 0.2s;
}
.button div span:nth-child(5) {
  transition-delay: 0.25s;
}
.button div span:nth-child(6) {
  transition-delay: 0.3s;
}
.button div span:nth-child(7) {
  transition-delay: 0.35s;
}
.button div span:nth-child(8) {
  transition-delay: 0.4s;
}
.button div span:nth-child(9) {
  transition-delay: 0.45s;
}
.button div span:nth-child(10) {
  transition-delay: 0.5s;
}
.button div span:nth-child(11) {
  transition-delay: 0.55s;
}
.button:hover {
  --y: var(--move-hover);
  --shadow: var(--shadow-hover);
}
.button:hover span {
  --m: calc(var(--font-size) * -1);
}
.button.reverse {
  --font-shadow: calc(var(--font-size) * -1);
}
.button.reverse:hover span {
  --m: calc(var(--font-size));
}

html {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

* {
  box-sizing: inherit;
}
*:before, *:after {
  box-sizing: inherit;
}

body {
  min-height: 100vh;
  display: flex;
  font-family: "Roboto", Arial;
  justify-content: center;
  align-items: center;
  background: #E4ECFA;
}
body .button {
  margin: 0 12px;
}
body .dribbble {
  position: fixed;
  display: block;
  right: 20px;
  bottom: 20px;
}
body .dribbble img {
  display: block;
  height: 28px;
}
</style>
</head>
<body>
  <a href="" class="button">Button</a>
<a href="" class="button reverse dark">Reverse</a>
<a href="" class="button fast white">Fast</a>

<!-- dribbble -->
<a class="dribbble" href="https://dribbble.com/shots/7441241-Button-Hover-Effects" target="_blank"><img src="https://cdn.dribbble.com/assets/dribbble-ball-mark-2bd45f09c2fb58dbbfb44766d5d1d07c5a12972d602ef8b32204d28fa3dda554.svg" alt=""></a>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
      <script id="rendered-js" >
document.querySelectorAll('.button').forEach(button => button.innerHTML = '<div><span>' + button.textContent.trim().split('').join('</span><span>') + '</span></div>');
    </script>
</body>
</html>

10. By Kyle Brumm

Made by Kyle Brumm. Multiple button hover effects. ( Source )

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

<style>
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400|Raleway:300);
html {
  padding-top: 50px;
  font-family: "Open Sans", Helvetica, arial, sans-serif;
  text-align: center;
  background-color: #eeeeee;
}
html *,
html *:before,
html *:after {
  box-sizing: border-box;
  transition: 0.5s ease-in-out;
}
html i, html em,
html b, html strong,
html span {
  transition: none;
}

*:before,
*:after {
  z-index: -1;
}

h1,
h4 {
  font-family: "Raleway", "Open Sans", sans-serif;
  margin: 0;
  line-height: 1;
}

a {
  text-decoration: none;
  line-height: 80px;
  color: black;
}

.centerer {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  padding: 0 1rem;
}

@media (min-width: 600px) {
  .wrap {
    width: 50%;
    float: left;
  }
}
[class^=btn-] {
  position: relative;
  display: block;
  overflow: hidden;
  width: 100%;
  height: 80px;
  max-width: 250px;
  margin: 1rem auto;
  text-transform: uppercase;
  border: 1px solid currentColor;
}

.btn-0 {
  color: #b58769;
}
.btn-0:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #65442f;
  transform: translateX(-100%);
}
.btn-0:hover {
  color: #e9dcd3;
}
.btn-0:hover:before {
  transform: translateX(0);
}

.btn-1 {
  color: #b35bc1;
}
.btn-1:before {
  content: "";
  position: absolute;
  top: 0;
  right: -50px;
  bottom: 0;
  left: 0;
  border-right: 50px solid transparent;
  border-bottom: 80px solid #63256d;
  transform: translateX(-100%);
}
.btn-1:hover {
  color: #e9cfed;
}
.btn-1:hover:before {
  transform: translateX(0);
}

.btn-1-2 {
  color: #a89674;
}
.btn-1-2:before, .btn-1-2:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-bottom: 80px solid #5c4f37;
}
.btn-1-2:before {
  right: -50px;
  border-right: 50px solid transparent;
  transform: translateX(-100%);
}
.btn-1-2:after {
  left: -50px;
  border-left: 50px solid transparent;
  transform: translateX(100%);
}
.btn-1-2:hover {
  color: #e6e0d6;
}
.btn-1-2:hover:before {
  transform: translateX(-40%);
}
.btn-1-2:hover:after {
  transform: translateX(40%);
}

.btn-2 {
  color: #cfadc9;
}
.btn-2:before, .btn-2:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.btn-2:before {
  right: -50px;
  border-right: 50px solid transparent;
  border-bottom: 80px solid #775f73;
  transform: translateX(-100%);
}
.btn-2:after {
  left: -50px;
  border-left: 50px solid transparent;
  border-top: 80px solid #775f73;
  transform: translateX(100%);
}
.btn-2:hover {
  color: #f1e7ef;
}
.btn-2:hover:before {
  transform: translateX(-49%);
}
.btn-2:hover:after {
  transform: translateX(49%);
}

.btn-3:before, .btn-3:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-top: 40px solid #6e6435;
  border-bottom: 40px solid #6e6435;
}
.btn-3:before {
  border-right: 40px solid transparent;
  transform: translateX(-100%);
}
.btn-3:after {
  border-left: 40px solid transparent;
  transform: translateX(100%);
}
.btn-3:hover {
  color: #ede9d6;
}
.btn-3:hover:before {
  transform: translateX(-30%);
}
.btn-3:hover:after {
  transform: translateX(30%);
}

.btn-4 {
  color: #95ce51;
}
.btn-4:before, .btn-4:after,
.btn-4 span:before,
.btn-4 span:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #4e761e;
}
.btn-4:before {
  transform: translate(-100%, -100%);
}
.btn-4:after {
  transform: translate(-100%, 100%);
}
.btn-4 span:before {
  transform: translate(100%, -100%);
}
.btn-4 span:after {
  transform: translate(100%, 100%);
}
.btn-4:hover {
  color: #e0f1cc;
}
.btn-4:hover:before {
  transform: translate(-50%, -50%);
}
.btn-4:hover:after {
  transform: translate(-50%, 50%);
}
.btn-4:hover span:before {
  transform: translate(50%, -50%);
}
.btn-4:hover span:after {
  transform: translate(50%, 50%);
}

.btn-5 {
  color: #823e30;
}
.btn-5:after {
  content: "";
  width: 0;
  height: 0;
  -webkit-transform: rotate(360deg);
  border-style: solid;
  border-width: 0 0 0 0;
  border-color: transparent #411107 transparent transparent;
  position: absolute;
  top: 0;
  right: 0;
}
.btn-5:before {
  content: "";
  width: 0;
  height: 0;
  -webkit-transform: rotate(360deg);
  border-style: solid;
  border-width: 0 0 0 0;
  border-color: transparent transparent transparent #411107;
  position: absolute;
  bottom: 0;
  left: 0;
}
.btn-5:before, .btn-5:after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border: 0 solid;
  transform: rotate(360deg);
}
.btn-5:before {
  bottom: 0;
  left: 0;
  border-color: transparent transparent transparent #411107;
}
.btn-5:after {
  top: 0;
  right: 0;
  border-color: transparent #411107 transparent transparent;
}
.btn-5:hover {
  color: #dac6c2;
}
.btn-5:hover:before, .btn-5:hover:after {
  border-width: 80px 262.5px;
}

.btn-6 {
  color: #3d7471;
}
.btn-6 span {
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-radius: 50%;
  background-color: #103735;
  transition: width 0.4s ease-in-out, height 0.4s ease-in-out;
  transform: translate(-50%, -50%);
  z-index: -1;
}
.btn-6:hover {
  color: #c6d6d5;
}
.btn-6:hover span {
  width: 225%;
  height: 562.5px;
}
.btn-6:active {
  background-color: #1b5b58;
}

.btn-7 {
  color: #a7b057;
}
.btn-7:before, .btn-7:after,
.btn-7 span:before,
.btn-7 span:after {
  content: "";
  position: absolute;
  top: 0;
  width: 25.25%;
  height: 0;
  background-color: #5b6122;
}
.btn-7:before {
  left: 0;
}
.btn-7:after {
  left: 50%;
}
.btn-7 span:before, .btn-7 span:after {
  top: auto;
  bottom: 0;
}
.btn-7 span:before {
  left: 25%;
}
.btn-7 span:after {
  left: 75%;
}
.btn-7:hover {
  color: #e5e8ce;
}
.btn-7:hover:before, .btn-7:hover:after,
.btn-7:hover span:before,
.btn-7:hover span:after {
  height: 80px;
}

.btn-8 {
  color: #6ba782;
}
.btn-8:before, .btn-8:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #315b41;
}
.btn-8:before {
  transform: translateY(-100%);
}
.btn-8:after {
  transform: translateY(100%);
}
.btn-8:hover {
  color: #d4e5da;
}
.btn-8:hover:before {
  transform: translateY(-50%);
}
.btn-8:hover:after {
  transform: translateY(50%);
}

.btn-9 {
  color: #79a7ce;
}
.btn-9:before, .btn-9:after,
.btn-9 span:before,
.btn-9 span:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  background-color: rgba(58, 91, 118, 0.25);
  transition: 0.4s ease-in-out;
}
.btn-9:after,
.btn-9 span:before {
  top: auto;
  bottom: 0;
}
.btn-9 span:before,
.btn-9 span:after {
  transition-delay: 0.4s;
}
.btn-9:hover {
  color: #d8e5f1;
}
.btn-9:hover:before, .btn-9:hover:after,
.btn-9:hover span:before,
.btn-9:hover span:after {
  height: 80px;
}
.btn-9:active {
  background-color: #6197c5;
}

.btn-10 {
  color: #99c6ab;
}
.btn-10:before, .btn-10:after,
.btn-10 span:before,
.btn-10 span:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 80px;
  background-color: rgba(81, 113, 94, 0.25);
  transition: 0.4s;
}
.btn-10:after,
.btn-10 span:before {
  left: auto;
  right: 0;
}
.btn-10 span:before,
.btn-10 span:after {
  transition-delay: 0.4s;
}
.btn-10:hover {
  color: #e1eee6;
}
.btn-10:hover:before, .btn-10:hover:after,
.btn-10:hover span:before,
.btn-10:hover span:after {
  width: 250px;
}
.btn-10:active {
  background-color: #87bc9c;
}

@-webkit-keyframes criss-cross-left {
  0% {
    left: -20px;
  }
  50% {
    left: 50%;
    width: 20px;
    height: 20px;
  }
  100% {
    left: 50%;
    width: 375px;
    height: 375px;
  }
}

@keyframes criss-cross-left {
  0% {
    left: -20px;
  }
  50% {
    left: 50%;
    width: 20px;
    height: 20px;
  }
  100% {
    left: 50%;
    width: 375px;
    height: 375px;
  }
}
@-webkit-keyframes criss-cross-right {
  0% {
    right: -20px;
  }
  50% {
    right: 50%;
    width: 20px;
    height: 20px;
  }
  100% {
    right: 50%;
    width: 375px;
    height: 375px;
  }
}
@keyframes criss-cross-right {
  0% {
    right: -20px;
  }
  50% {
    right: 50%;
    width: 20px;
    height: 20px;
  }
  100% {
    right: 50%;
    width: 375px;
    height: 375px;
  }
}
.btn-11 {
  position: relative;
  color: #535973;
}
.btn-11:before, .btn-11:after {
  position: absolute;
  top: 50%;
  content: "";
  width: 20px;
  height: 20px;
  background-color: #353c5a;
  border-radius: 50%;
}
.btn-11:before {
  left: -20px;
  transform: translate(-50%, -50%);
}
.btn-11:after {
  right: -20px;
  transform: translate(50%, -50%);
}
.btn-11:hover {
  color: #cdced6;
}
.btn-11:hover:before {
  -webkit-animation: criss-cross-left 0.8s both;
          animation: criss-cross-left 0.8s both;
  -webkit-animation-direction: alternate;
          animation-direction: alternate;
}
.btn-11:hover:after {
  -webkit-animation: criss-cross-right 0.8s both;
          animation: criss-cross-right 0.8s both;
  -webkit-animation-direction: alternate;
          animation-direction: alternate;
}
</style>
</head>
<body>
  <div class="centerer">
  <h1>Just Some More</h1>
  <h1>Button Hover Effects</h1>
  <h4>By: <a href="http://kylebrumm.com" target="_blank">Kyle Brumm</a></h4>

  <div class="wrap">
    <a class="btn-0" href="#">Swipe</a>
    <a class="btn-1" href="#">Diagonal Swipe</a>
    <a class="btn-1-2" href="#">Double Swipe</a>
    <a class="btn-2" href="#">Diagonal Close</a>
    <a class="btn-3" href="#"><span>Zoning In</span></a>
    <a class="btn-4" href="#"><span>4 Corners</span></a>
    <a class="btn-5" href="#">Slice</a>
  </div>
  <div class="wrap">
    <a class="btn-6" href="#">Position Aware<span></span></a>
    <a class="btn-7" href="#"><span>Alternate</span></a>
    <a class="btn-8" href="#">Smoosh</a>
    <a class="btn-9" href="#"><span>Vertical Overlap</span></a>
    <a class="btn-10" href="#"><span>Horizontal Overlap</span></a>
    <a class="btn-11" href="#">Collision</a>
  </div>
</div>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://s.codepen.io/assets/libs/modernizr.js'></script>
      <script>
$(function () {
  $('.btn-6').
  on('mouseenter', function (e) {
    var parentOffset = $(this).offset(),
    relX = e.pageX - parentOffset.left,
    relY = e.pageY - parentOffset.top;
    $(this).find('span').css({ top: relY, left: relX });
  }).
  on('mouseout', function (e) {
    var parentOffset = $(this).offset(),
    relX = e.pageX - parentOffset.left,
    relY = e.pageY - parentOffset.top;
    $(this).find('span').css({ top: relY, left: relX });
  });
  $('[href=#]').click(function () {return false;});
});
    </script>
</body>
</html>

11. By Robson Muniz

Made by Robson Muniz. Neon Light Button Hover Effect. ( Source )

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
body {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #031321;
    font-family: consolas;
}

a {
    position: relative;
    display: inline-block;
    padding: 15px 30px;
    color: #2196f3;
    text-transform: uppercase;
    letter-spacing: 4px;
    text-decoration: none;
    font-size: 24px;
    overflow: hidden;
    transition: 0.2s;
}



a:hover {
    color: #255784;
    background: #2196f3;
    box-shadow: 0 0 10px #2196f3, 0 0 40px #2196f3, 0 0 80px #2196f3;
    transition-delay: 1s;
}


a span {
    position: absolute;
    display: block;
}




a span:nth-child(1) {
    top: 0;
    left: -100%;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #2196f3);
}



a:hover span:nth-child(1) {
    left: 100%;
    transition: 1s;
}


a span:nth-child(3) {
    bottom: 0;
    right: -100%;
    width: 100%;
    height: 2px;
    background: linear-gradient(270deg, transparent, #2196f3);
}

a:hover span:nth-child(3) {
    right: 100%;
    transition: 1s;
    transition-delay: 0.5s;
}



a span:nth-child(2) {
    top: -100%;
    right: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(180deg, transparent, #2196f3);
}

a:hover span:nth-child(2) {
    top: 100%;
    transition: 1s;
    transition-delay: 0.25s;
}



a span:nth-child(4) {
    bottom: -100%;
    left: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(360deg, transparent, #2196f3);
}

a:hover span:nth-child(4) {
    bottom: 100%;
    transition: 1s;
    transition-delay: 0.75s;
}
</style>
</head>
  <body>
    <a href="#">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      Neon Button
    </a>
</body>
</html>