/* From uiverse.io */
.stylebutton {
 --color: #DBB300;
 font-family: inherit;
 display: inline-block;
 width: 8em;
 height: 2.6em;
 line-height: 2.5em;
 position: relative;
 overflow: hidden;
 border: 2px solid var(--color);
 transition: color .5s;
 z-index: 1;
 font-size: 17px;
 border-radius: 6px;
 font-weight: 500;
 color: var(--color);
}

.stylebutton:before {
 content: "";
 position: absolute;
 z-index: -1;
 background: var(--color);
 height: 400px;
 width: 500px;
 border-radius: 50%;
}

.stylebutton:hover {
 color: #fff;
}

.stylebutton:before {
 top: 100%;
 left: 100%;
 transition: all .7s;
}

.stylebutton:hover:before {
 top: -70px;
 left: -70px;
}

.stylebutton:active:before {
 background: #BE9B00;
 transition: background 0s;
}


/* From uiverse.io */
.loginbutton {
 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;
}

.loginbutton.learn-more {
 width: 12rem;
 height: auto;
}

.loginbutton.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: #00235C;
 border-radius: 1.625rem;
}

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

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

.loginbutton.learn-more .circle .icon.arrow::before {
 position: absolute;
 content: "";
 top: -0.29rem;
 right: 0.0625rem;
 width: 0.625rem;
 height: 0.625rem;
 border-top: 0.125rem solid #fff;
 border-right: 0.125rem solid #fff;
 transform: rotate(45deg);
}

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

.loginbutton:hover .circle {
 width: 100%;
}

.loginbutton:hover .circle .icon.arrow {
 background: #fff;
 transform: translate(1rem, 0);
}

.loginbutton:hover .button-text {
 color: #fff;
}