title: Remove blue border from css custom-styled button in Chrome
body: <p>I'm working on a web page, and I want custom-styled <code>&lt;button&gt;</code> tags. So with CSS, I said: <code>border: none</code>. Now it works perfectly in safari, but in chrome, when I click one of the buttons, it puts an annoying blue border around it. I thought <code>button:active { outline: none }</code> or <code>button:focus { outline:none }</code> would work, but neither do. Any ideas? </p>
  
  <p>This is what it looks like before being clicked (and how I want it to still look after being clicked):</p>
  
  <p><img src="https://i.stack.imgur.com/WVZZe.png" alt=""></p>
  
  <p>And this is the border I'm talking about:</p>
  
  <p><img src="https://i.stack.imgur.com/XwWNF.png" alt="enter image description here"></p>
  
  <p>Here is my CSS:</p>
  
  <pre><code>button.launch {
      background-color: #F9A300;
      border: none;
      height: 40px;
      padding: 5px 15px;
      color: #ffffff;
      font-size: 16px;
      font-weight: 300;
      margin-top: 10px;
      margin-right: 10px;
  }
  
  button.launch:hover {
      cursor: pointer;
      background-color: #FABD44;
  }
  
  button.change {
      background-color: #F88F00;
      border: none;
      height: 40px;
      padding: 5px 15px;
      color: #ffffff;
      font-size: 16px;
      font-weight: 300;
      margin-top: 10px;
      margin-right: 10px;
  }
  
  button.change:hover {
      cursor: pointer;
      background-color: #F89900;
  }
  
  button:active {
      outline: none;
      border: none;
  }
  </code></pre>