Question 250428 in CSS Question posted in
Some basic documentation can be found here.

Css – Add ripple effect to a disabled button

I have a button which would enable and disable based on the mandatory form fields. When the button is enabled, clicking would have the ripple effect.

I want to add the ripple effect when the button is disabled as well. I tried something similar to the following code in the Vue Playground.
I am using Vue3 with Composition API.

Vue playground code

How to enable the click event and add the ripple effect when the button is disabled?

<script setup>
import { computed, ref } from 'vue'

//This is based on the form fields
const disableSubmit = ref(true)

//const rippleEffect = computed(() => (disableSubmit.value ? "btn-ripple" : ""))

</script>

<template>
  <button :disabled="disableSubmit" class="btn-ripple">
    <span>Submit</span>
  </button>
</template>

<style>

.btn-ripple {
    box-sizing: border-box;
    border: none;
    cursor: pointer !important;
    color: white;
    padding: 15px 40px;
    border-radius: 8px;
    font-size: 22px;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
    background: #00a1d4;
    transition: all 0.1s;
    outline: none;
}

.btn-ripple {
  position: relative;
  overflow: hidden;
}

.btn-ripple:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  background-color: #ffffff;
  opacity: 0;
  border-radius: 100%;
  transform: scale(1, 1) translate(-50%);
  transform-origin: 50% 50%;
}

@keyframes ripple {
  0% {
    transform: scale(0, 0);
    opacity: 1;
  }
  20% {
    transform: scale(25, 25);
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(40, 40);
  }
}

.btn-ripple:focus:not(:active)::after {
  animation: ripple 1s ease-out;
}

.btn-ripple:after {
  visibility: hidden;
}

.btn-ripple:focus:after {
  visibility: visible;
}
</style>
Tags:

2

Answers


  1. 0

    I suggest to not use all that design styles and keep using the default provided by Quasar but use the solution below by avoiding the click event in case of the disabled status.

    <q-btn round color="primary" @click="null" icon="card_giftcard"></q-btn>
    Login or Signup to reply.
  2. 0

    Using the disabled HTML attribute means that your button won’t be focused, hence the .btn-ripple:focus state won’t ever be achieved.

    I guess, the easiest way to do what you want is to imitate the disabling, i.e., to have something like if (disableSubmit.value) return inside your click handler, while the button itself will stay enabled from the pure HTML point of view.

    You’ll also might want to change the class to something like :class="{ 'btn-ripple': true, 'btn-ripple-disabled': disableSubmit }", if you need to add some styling to the disabled button.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search