<style>
:root {
 --bg: #7046F7;
 --color:transparent;
 --hover-color:#fff ;
 --hover-btn-color:#fff ;
 --btn03h: 56px;
}
.btn-sonneto-primary .tn-atom {
 position: relative;
 overflow: hidden;
 z-index: 1
}

.btn-sonneto-primary .tn-atom:after {
 content: "";
 position: absolute;
 left: 0;
 top: 0;
 width: var(--btn03h);
 height: 100%;
 border-radius: 50%;
 background: var(--bg);
 transition: all 0.4s ease;
 z-index: -1;
}

.btn-sonneto-primary .tn-atom:before {
 position: absolute;
 content: "";
 top: 50%;
 /*left: 1.0625rem;*/
 left:calc(var(--btn03h) / 2);
 width: 10px;
 height: 10px;
 border-top: 2px solid #fff;
 border-right: 2px solid #fff;
 transform: translate(-50%, -50%) rotate(45deg);
 transition: all 0.6s ease;
}
.btn-sonneto-primary .tn-atom {
 border-color: var(--color);
}
.btn-sonneto-primary .tn-atom:hover {
 border-color: var(--hover-color);
 color: var(--hover-btn-color)!important;
}
.btn-sonneto-primary .tn-atom:hover:after {
 width: 100%;
 border-radius: 0;
}

.btn-sonneto-primary .tn-atom:hover:before {
 transform: translate(100%, -50%) rotate(45deg);
}
.btn-sonneto-primary .tn-atom {padding-left:30px;}
</style>
<script>
 $(document).ready(function() {
 $(".btn-sonneto-primary .tn-atom").each(function() {
 let btnHeight = $(this).outerHeight();
 $(this).get(0).style.setProperty('--btn03h', `${btnHeight}px`);
 });
});

</script>