How to remove quasar button hover

Issue

how can i remove hover on button? on Quasar

<q-btn
    class="q-mx-sm q-mt-sm"
    flat
    color="grey"
    outline
    @click="filterOpen"
    icon="tune"
    label="filtreler"
  />

Solution

I didn’t see any props or option for it in Quasaar, so I made the following trick instead.

You can use the following snippet:

.q-btn .q-focus-helper {
  display: none;
}

I recommend adding a class to target these buttons. Here an exemple for local styles :

<q-btn
  class="btn--no-hover q-mx-sm q-mt-sm"
  flat
  color="grey"
  outline
  @click="filterOpen"
  icon="tune"
  label="filtreler"
/>
:deep(.q-btn.btn--no-hover .q-focus-helper) {
  display: none;
}

Depending of the version of vue that you are using, you can make this style available globally with <style> (without scope) in the App.vue, or , or using the :global(.q-btn.btn--no-hover .q-focus-helper) modifier.

Answered By – Lyokolux

Answer Checked By – Pedro (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.