title: How to remove ant-click-animating of button Ant design
body: <p>After I click on the button, it has the animation around the button. So I want to turn it off, I try to set CSS for element and Pseudo-classes but it's not working.</p>
  <pre><code>.ant-switch,
  .ant-switch:focus,
  .ant-switch:active {
    border-color: white !important;
    box-shadow: none !important;
    outline: unset;
  }
  </code></pre>
  <p>My code:</p>
  <pre><code>import React from 'react';
  import { Switch } from 'antd';
  import styled from 'styled-components';
  
  const RSwitch = styled(Switch)`
    background-color: ${props =&gt; props.backgroundcolor};
  
    .ant-switch-handle::before {
      background-color: #9b9b9b;
      right: 0;
    }
  
    &amp;[aria-checked='true'] {
      .ant-switch-handle {
        ::before {
          background-color: ${props =&gt; props.color};
        }
      }
    }
  `;
  
  export default function SwitchComponent({
    onChange,
    checked,
    color = '#00afdb',
    backgroundColor = ''
  }) {
    return (
      &lt;RSwitch
        onChange={onChange}
        checked={checked}
        size=&quot;small&quot;
        color={color}
        backgroundcolor={backgroundColor}
      /&gt;
    );
  }
  </code></pre>
  <p><a href="https://i.stack.imgur.com/l85xZ.png" rel="nofollow noreferrer">ant switch picture</a></p>
  <p><a href="https://i.stack.imgur.com/w0mpn.png" rel="nofollow noreferrer">HTML of switch</a></p>