animated button

animated button

by Ayyappan Sakthivadivel

HTML

<button class="btn-grad btn-anim btn-4 btn-4a icon-arrow-right">Continue</button>

CSS

body{
  margin: 0;
}

/* General button style (reset) */
.btn-anim {
	border: none;
	cursor: pointer;
  border-radius: 30px;
  padding: 10px 30px;
	position: relative;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
  box-shadow: 0 1px 4px rgb(0 0 0 / 30%), 0 4px 4px rgb(0 0 0 / 25%);
}

.btn-anim:after {
	content: '';
	position: absolute;
	z-index: -1;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}

/* Pseudo elements for icons */
.btn-anim:before {
	font-family: 'icomoon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	position: relative;
	-webkit-font-smoothing: antialiased;
}

.btn-4 {
	border-radius: 5px;
	color: #fff;
	overflow: hidden;
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

.btn-4:hover {
  box-shadow: none;
}

.btn-4:active {
	border-color: #ff6a00;
	color: #f0f0f0;
}

.btn-4:before {
	position: absolute;
	height: 100%;
	font-size: 125%;
	line-height: 3.5;
	color: #fff;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}

.btn-4:active:before {
	color: #fff;
}

/* Button 4a */
.btn-4a:before {
	left: 130%;
	 top: -17px;
}

.btn-4a:hover:before {
	left: 83%;
}

.icon-arrow-right:before {
	content: "\e00d";
}


         .btn-grad {background-image: linear-gradient(to right, #FF512F 0%, #F09819  51%, #FF512F  100%)}
         .btn-grad {
            margin: 10px;
            text-align: center;
            text-transform: uppercase;
            transition: 0.5s;
            background-size: 200% auto;
            color: white;            
            display: block;
          }

          .btn-grad:hover {
            background-position: right center; /* change the direction of the change here */
            color: #fff;
            text-decoration: none;
          }