title: Svelte SPA button click does not back to normal style state
body: <p>This is just SPA with javascript svelte framework.</p>
  <p>I have buttons using bulma CSS Framework. As you can see in the preview when I click the button, and the cursor leave the button, the button style state still in click state.</p>
  <p>how to solve this? so after click, the button back to normal style state?</p>
  <p>I write it again in svelte</p>
  <p>you can check in this <a href="https://svelte.dev/repl/a4d59c32a455489a93ea02ac098813b9?version=3.29.4" rel="nofollow noreferrer">svelte REPL</a>.</p>
  <pre><code>&lt;svelte:head&gt;
      &lt;meta charset=&quot;utf-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
    &lt;title&gt;Hello Bulma!&lt;/title&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css&quot;&gt;
  &lt;/svelte:head&gt;
  &lt;script&gt;
      let stepIndex = 0;
      let steps = [
          {
              text: 'Welcome to the 100 days project to help us better',
              buttonText: 'Next'
          },
          {
              text: 'We believe biological conditions influence psychological situations',
              buttonText: 'Next'
          },
          {
              text: 'Life begins with us thinking that we are alive',
              buttonText: 'Next'
          },
          {
              text: 'Experience a better life after 100 days commitment',
              buttonText: 'Next'
          },
          {
              text: 'Do you want have a better life',
              buttonText: 'Yes!!!'
          }
      ];
      function next(data){
          stepIndex++;
      }
  &lt;/script&gt;
  
  &lt;div&gt;
      &lt;i class=&quot;fa fa-quote-left fa-2x fa-pull-left fa-border&quot; aria-hidden=&quot;true&quot;&gt;&lt;/i&gt;
      &lt;p class=&quot;is-size-4 has-text-grey has-text-weight-semibold&quot;&gt;{steps[stepIndex].text}&lt;/p&gt;
      &lt;hr /&gt;
      &lt;div class=&quot;columns is-mobile&quot;&gt;
            &lt;div class=&quot;column&quot;&gt;
                  &lt;button class=&quot;button is-danger is-medium is-fullwidth is-outlined&quot; on:click={()=&gt;alert(&quot;Don't back, Just go forward!!!&quot;)}&gt;
              &lt;span class=&quot;icon&quot;&gt;&lt;i class=&quot;fa fa-arrow-left&quot;&gt;&lt;/i&gt;&lt;/span&gt;&lt;span&gt;Back&lt;/span&gt;
              &lt;/button&gt;
              &lt;/div&gt;
          &lt;div class=&quot;column&quot;&gt;
              &lt;button class=&quot;button is-primary is-medium is-fullwidth is-outlined&quot; on:click={()=&gt;next()}&gt;
                  &lt;span&gt;{steps[stepIndex].buttonText}&lt;/span&gt; &lt;span class=&quot;icon&quot;&gt;&lt;i class=&quot;fa fa-arrow-right&quot;&gt;&lt;/i&gt;&lt;/span&gt;
              &lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>I don't think this problem nothing to do with my code, but I try to share some in svelte. because it have same problem. wish you can help me to solve this problem.</p>
  <p>thanks</p>
  <p><a href="https://i.stack.imgur.com/2uTg2.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2uTg2.gif" alt="Example" /></a></p>