Buttons

Buttons CSS You Guys Can Steal

.btn-grad {background-image: linear-gradient(to right, #2b5876 0%, #4e4376 51%, #2b5876  100%)} .btn-grad { margin: 10px; padding: 15px 45px; text-align: center; text-transform: uppercase; transition: 0.5s; background-size: 200% auto; color: white; box-shadow: 0 0 20px #eee; border-radius: 10px; display: block; }

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

.btn-grad {background-image: linear-gradient(to right, #1FA2FF 0%, #12D8FA 51%, #1FA2FF  100%)} .btn-grad { margin: 10px; padding: 15px 45px; text-align: center; text-transform: uppercase; transition: 0.5s; background-size: 200% auto; color: white; box-shadow: 0 0 20px #eee; border-radius: 10px; display: block; }

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

.btn-grad {background-image: linear-gradient(to right, #1D2B64 0%, #F8CDDA 51%, #1D2B64  100%)} .btn-grad { margin: 10px; padding: 15px 45px; text-align: center; text-transform: uppercase; transition: 0.5s; background-size: 200% auto; color: white; box-shadow: 0 0 20px #eee; border-radius: 10px; display: block; }

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

.btn-grad {background-image: linear-gradient(to right, #F09819 0%, #EDDE5D 51%, #F09819  100%)} .btn-grad { margin: 10px; padding: 15px 45px; text-align: center; text-transform: uppercase; transition: 0.5s; background-size: 200% auto; color: white; box-shadow: 0 0 20px #eee; border-radius: 10px; display: block; }

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

.btn-grad {background-image: linear-gradient(to right, #ff6e7f 0%, #bfe9ff 51%, #ff6e7f  100%)} .btn-grad { margin: 10px; padding: 15px 45px; text-align: center; text-transform: uppercase; transition: 0.5s; background-size: 200% auto; color: white; box-shadow: 0 0 20px #eee; border-radius: 10px; display: block; }

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