Add variant button selector to collection page

I have edit my store to have add to cart button and variant selector and it’s working. How can I change the dropdown list to button selector?

My code form

{% unless sold_out %}
<form action="/cart/add" method="post" enctype="multipart/form-data" id="product-form-{{ product.id }}" class="product-form">
<div class="add-to-cart__wrapper" style="margin-top:0px; margin-bottom: 10px;">
<button type="submit" name="add" class="btn btn--splash btn--full uppercase addToCart">
<span id="AddToCartText">Add to Order</span>
</button>
</div>

{% if product.variants.size == 1 %}
<input type="hidden" id="variant-select" name="id" value="{{ product.variants.first.id }}" />
{% else %}
<div class="selector-wrapper"> 

<select name="id" id="productSelect" class="product-single__variants btn--full uppercase">
{% for variant in product.variants %}
{% if variant.available %}
<option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} value="{{ variant.id }}" data-sku="{{ variant.sku }}">{{ variant.title }}</option>
{% else %}
<option disabled="disabled">
{{ variant.title }} - {{ 'products.product.sold_out' | t }}
</option>
{% endif %}
{% endfor %}
</select>
</div>
{% endif %}
</form> 
{% endunless %}

Please advise.

Thank you!