Link Text to button

amazezones
Explorer
82 0 13

Hello

 

Could anyone knows how to change below code from a text link to button link 

 

{%- assign assign total_results = predictive_search.resources.products.size | plus: first_column_results_size -%}
<div id="predictive-search-option-search-keywords" class="predictive-search__search-for-button search__view-all px-10 p-lg-0{% if total_results > 0 %} mt-20{% endif %} mt-lg-20">
<button
class="predictive-search__item predictive-search__item--term btn--unstyled btn-link"
tabindex="-1"
role="option"
aria-selected="false"
>


<a href="{{ page.url }}" class="btn btn--full mt-20">{{ 'general.search.search_for' | t: terms: predictive_search.terms }}</a>
</button>
</div>

 

 

change the writing "Search for "zsha"

Screenshot 2023-12-30 at 3.54.45 PM.png

 

to this button shape like below instead of text

 

Screenshot 2023-12-30 at 3.55.56 PM.png

Reply 1 (1)

amazezones
Explorer
82 0 13

I have changed below code 

 

<span data-predictive-search-search-for-text>{{ 'general.search.search_for' | t: terms: predictive_search.terms }} </span>

 

to 

 

<a href="{{ page.url }}" class="btn btn--full mt-20">{{ 'general.search.search_for' | t: terms: predictive_search.terms }}</a>

 

but when I click on the blue Botton box it take me to home page, it won't show result for the search word.

 

Screenshot 2023-12-30 at 4.16.45 PM.png