Coder Wrap provides free to use snippets

/**Typeo CSS Start**/
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

* {
 box-sizing: border-box;
}

body {
 font-family: "Poppins", sans-serif;
 color: #444;
 box-sizing: border-box;
 margin: 0px;
}

.buttons-options-main h2 {
 font-size: 22px;
 margin-bottom: 20px;
 display: inline-block;
 width: 100%;
}

.btns-options-item {
 margin-top: 40px;
 padding: 20px;
 display: inline-block;
 width: 100%;
 text-align: center;
}

/**Typeo CSS End**/

/*Button Option 1 Start*/
.btns-option1 .btn-cmn {
 background: transparent;
 --c: goldenrod;
 color: var(--c);
 font-size: 16px;
 border: 2px solid var(--c);
 border-radius: 4px;
 width: auto;
 height: auto;
 text-transform: uppercase;
 font-weight: bold;
 font-family: sans-serif;
 letter-spacing: 0.1em;
 text-align: center;
 line-height: 1.3;
 position: relative;
 overflow: hidden;
 z-index: 1;
 transition: 0.5s;
 padding: 11px 20px 10px 20px;
 display: inline-block;
 cursor: pointer;
}

.btns-option1 .btn-cmn span {
 position: absolute;
 width: 25%;
 height: 100%;
 background-color: var(--c);
 transform: translateY(150%);
 border-radius: 50%;
 left: calc((var(--n) - 1) * 25%);
 transition: 0.5s;
 transition-delay: calc((var(--n) - 1) * 0.1s);
 z-index: -1;
}

.btns-option1 .btn-cmn:hover {
 color: black;
}

.btns-option1 .btn-cmn:hover span {
 transform: translateY(0) scale(2);
}

.btns-option1 .btn-cmn span:nth-child(1) {
 --n: 1;
}

.btns-option1 .btn-cmn span:nth-child(2) {
 --n: 2;
}

.btns-option1 .btn-cmn span:nth-child(3) {
 --n: 3;
}

.btns-option1 .btn-cmn span:nth-child(4) {
 --n: 4;
}

/*Button Option 1 End*/

/*Button Option 2 Start*/
.cta-opt2 {
 position: relative;
 padding: 19px 22px;
 transition: all 0.2s ease;
 cursor: pointer;
 border: none;
 background-color: transparent;
 color: #000;
 text-decoration: none;
 display: inline-block;
}

.cta-opt2:before {
 content: "";
 position: absolute;
 top: 2px;
 left: 0;
 display: block;
 border-radius: 28px;
 background: rgba(255, 171, 157, 0.5);
 width: 56px;
 height: 56px;
 transition: all 0.3s ease;
}

.cta-opt2 span {
 position: relative;
 font-size: 16px;
 line-height: 18px;
 font-weight: 900;
 letter-spacing: 0.25em;
 text-transform: uppercase;
 vertical-align: middle;
}

.cta-opt2 svg {
 position: relative;
 top: 0;
 margin-left: 10px;
 fill: none;
 stroke-linecap: round;
 stroke-linejoin: round;
 stroke: #111;
 stroke-width: 2;
 transform: translateX(-5px);
 transition: all 0.3s ease;
}

.cta-opt2:hover:before {
 width: 100%;
 background: #ffab9d;
}

.cta-opt2:hover svg {
 transform: translateX(0);
}

.cta-opt2:active {
 transform: scale(0.96);
}

/*Slide text on hover animation start*/
.slide-text-hover:hover {
 cursor: pointer
}

.slide-text-hover {
 background: transparent;
 outline: none;
 position: relative;
 border: 2px solid #111;
 padding: 15px 50px;
 overflow: hidden;
}

/*.slide-text-hover:before (attr data-hover)*/
.slide-text-hover:hover:before {
 opacity: 1;
 transform: translate(0, 0);
}

.slide-text-hover:before {
 content: attr(data-hover);
 position: absolute;
 top: 1.4em;
 left: 0;
 width: 100%;
 text-transform: uppercase;
 letter-spacing: 3px;
 font-weight: 800;
 font-size: .8em;
 opacity: 0;
 transform: translate(-100%, 0);
 transition: all .3s ease-in-out;
}

/*.slide-text-hover div (.slide-text-hover text before hover)*/
.slide-text-hover:hover div {
 opacity: 0;
 transform: translate(100%, 0)
}

.slide-text-hover div {
 text-transform: uppercase;
 letter-spacing: 3px;
 font-weight: 800;
 font-size: .8em;
 transition: all .3s ease-in-out;
}

/*Slide text on hover animation start*/

/*Button Option 2 End*/

/*Button Option 3 Start*/
.h-button {
 position: relative;
 background: #000;
 padding: 20px 50px;
 text-align: center;
 font-weight: 900;
 color: #fff;
 text-decoration: none;
 display: inline-block;
}

.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;
}

/*Button Option 3 Start*/

/*Button Option 4 Start*/
.btn-4 {
 font-family: "Poppins", sans-serif;
 background: none;
 border: none;
 cursor: pointer;
 line-height: 1.3;
 font-weight: 700;
 font-size: 20px;
 padding: 1em 3em;
 outline: none !important;
 text-transform: uppercase;
}

.draw-border {
 box-shadow: inset 0 0 0 4px #58afd1;
 color: #58afd1;
 transition: color 0.25s 0.0833333333s;
 position: relative;
}

.draw-border::before, .draw-border::after {
 border: 0 solid transparent;
 box-sizing: border-box;
 content: "";
 pointer-events: none;
 position: absolute;
 width: 0;
 height: 0;
 bottom: 0;
 right: 0;
}

.draw-border::before {
 border-bottom-width: 4px;
 border-left-width: 4px;
}

.draw-border::after {
 border-top-width: 4px;
 border-right-width: 4px;
}

.draw-border:hover {
 color: #000000;
}

.draw-border:hover::before, .draw-border:hover::after {
 border-color: #000000;
 transition: border-color 0s, width 0.25s, height 0.25s;
 width: 100%;
 height: 100%;
}

.draw-border:hover::before {
 transition-delay: 0s, 0s, 0.25s;
}

.draw-border:hover::after {
 transition-delay: 0s, 0.25s, 0s;
}

/*Button Option 4 Start*/

/*Button Option 5 Start*/
.btn-5 {
 color: #000;
 border: 2px solid #000;
 padding: 20px 80px;
 text-transform: uppercase;
 letter-spacing: 4px;
 position: relative;
 overflow: hidden;
 cursor: pointer;
 display: inline-block;
}

.btn-5 span {
 font-family: "Roboto", sans-serif;
 position: relative;
 z-index: 100;
}

.btn-5:before, .btn-5:after {
 content: "";
 position: absolute;
 display: block;
 height: 100%;
 width: 100%;
 top: 0;
 left: 0;
}

.btn-5:before {
 transform: translate3d(-100%, 0, 0);
 background-color: #000;
 border: 1px solid #000;
 transition: transform 300ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.btn-5:after {
 background-color: #58afd1;
 border: 1px solid #58afd1;
 transform: translate3d(100%, 0, 0);
 transition: transform 300ms 300ms cubic-bezier(0.16, 0.73, 0.58, 0.62);
}

.btn-5:hover:before {
 transform: translate3d(0, 0, 0);
}

.btn-5:hover:after {
 transform: translate3d(0, 0, 0);
}

/*Button Option 5 Start*/
.btn-hover-effects {
 display: flex;
 flex-flow: row wrap;
 align-items: center;
 text-align: center;
 justify-content: center;
}

.btn-opt-6 {
 color: #fff;
 cursor: pointer;
 font-size: 16px;
 font-weight: 400;
 line-height: 45px;
 margin: 10px;
 max-width: 160px;
 position: relative;
 text-decoration: none;
 text-transform: uppercase;
 width: 100%;
}

.btn-opt-6:hover {
 text-decoration: none;
}

.btn-opt1 {
 background: #0a5e7f;
 font-weight: 100;
}

.btn-opt1 svg {
 height: 45px;
 left: 0;
 position: absolute;
 top: 0;
 width: 100%;
}

.btn-opt1 rect {
 fill: none;
 stroke: #fff;
 stroke-width: 2;
 stroke-dasharray: 422, 0;
 transition: all 0.35s linear;
}

.btn-opt1:hover {
 background: rgba(225, 51, 45, 0);
 font-weight: 900;
 letter-spacing: 1px;
}

.btn-opt1:hover rect {
 stroke-width: 5;
 stroke-dasharray: 15, 310;
 stroke-dashoffset: 48;
 transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1);
}

.btn-opt2 {
 letter-spacing: 0;
}

.btn-opt2:hover, .btn-opt2:active {
 letter-spacing: 5px;
}

.btn-opt2:after, .btn-opt2:before {
 -webkit-backface-visibility: hidden;
 backface-visibility: hidden;
 border: 1px solid rgba(255, 255, 255, 0);
 bottom: 0px;
 content: " ";
 display: block;
 margin: 0 auto;
 position: relative;
 transition: all 280ms ease-in-out;
 width: 0;
}

.btn-opt2:hover:after, .btn-opt2:hover:before {
 -webkit-backface-visibility: hidden;
 backface-visibility: hidden;
 border-color: #fff;
 transition: width 350ms ease-in-out;
 width: 70%;
}

.btn-opt2:hover:before {
 bottom: auto;
 top: 0;
 width: 70%;
}

.btn-opt3 {
 background: #e3403a;
 border: 1px solid #da251f;
 box-shadow: 0px 2px 0 #d6251f, 2px 4px 6px #e02a24;
 font-weight: 900;
 letter-spacing: 1px;
 transition: all 150ms linear;
}

.btn-opt3:hover {
 background: #0a5e7f;
 border: 1px solid rgba(0, 0, 0, 0.05);
 box-shadow: 1px 1px 2px rgba(255, 255, 255, 0.2);
 color: #ec817d;
 text-decoration: none;
 text-shadow: -1px -1px 0 #c2211c;
 transition: all 250ms linear;
}

.btn-opt4 {
 border: 1px solid;
 overflow: hidden;
 position: relative;
}

.btn-opt4 span {
 z-index: 20;
}

.btn-opt4:after {
 background: #fff;
 content: "";
 height: 155px;
 left: -75px;
 opacity: 0.3;
 position: absolute;
 top: -50px;
 transform: rotate(35deg);
 transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1);
 width: 50px;
 z-index: 1;
}

.btn-opt4:hover:after {
 left: 120%;
 transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1);
}

.btn-opt5 {
 border: 0 solid;
 box-shadow: inset 0 0 20px rgba(255, 255, 255, 0);
 outline: 1px solid;
 outline-color: rgba(255, 255, 255, 0.5);
 outline-offset: 0px;
 text-shadow: none;
 transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);
}

.btn-opt5:hover {
 border: 1px solid;
 box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.5), 0 0 20px rgba(255, 255, 255, 0.2);
 outline-color: rgba(255, 255, 255, 0);
 outline-offset: 15px;
 text-shadow: 1px 1px 2px #427388;
}