Button: Dot next to Text – Button Hover: Dot to circle arrow

Description

+ Dot next to Button text (Button Block, Form Button)

+ Hover button: change Dot to Circle arrow

#1. Use code to Code Injection > Header

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
// tuanphan - 27-08-2025 //
window.addEventListener("load", (event) => {
    $('<div class="btn-circle_wrap"><div class="btn-circle"><div class="btn-arrow w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 32 32" fill="none"><path d="M15.7664 10L21.2664 15.5L15.7664 21" stroke="currentColor" stroke-width="1.35385" stroke-linejoin="bevel"></path><path d="M21.2649 15.5005L11 15.5005" stroke="currentColor" stroke-width="1.35385" stroke-linejoin="bevel"></path></svg></div></div></div>').appendTo('div.button-block a, button.button.sqs-system-button.sqs-editable-button.form-submit-button.sqs-button-element--primary');
});
</script>
<style>
.btn-circle_wrap {
    aspect-ratio: 1;
    justify-content: center;
    align-items: center;
    width: 2em;
    height: 2em !important;
    display: flex;
    position: relative;
    margin-left: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    border-radius: 50%;
}
.btn-circle {
    background-color: #000;
    border-radius: 50vw;
    transition: all .3s;
    transform: scale(.2);
}
.btn-arrow {
    opacity: 0;
    transition: left .3s, opacity .2s;
    position: relative;
    left: -100%;
}
.w-embed:before, .w-embed:after {
    content: " ";
    grid-area: 1 / 1 / 2 / 2;
    display: table;
}
div.button-block a:hover .btn-circle, button.button:hover .btn-circle {
    transform: scale(1);
}

div.button-block a:hover .btn-arrow, button.button:hover .btn-arrow {
    opacity: 1;
    left: 0%;
}
.btn-circle {
    background-color: #000;
}
  svg * {
    stroke: #fff;
}
  .btn-arrow.w-embed {
    width: 30px;
    height: 30px;
}
div.button-block a, button.button {
    display: flex !important;
    align-items: center;
}
button.button {
    margin: 0 auto !important;
}
</style>