main.css

/* Copyright 2016 The Chromium Authors. All rights reserved.
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file.
 */

.connecting {
  animation: glowing 1500ms infinite;
  background-color: #004A7F;
  border-radius: 10px;
  border: none;
  color: #FFFFFF;
  cursor: pointer;
  font-size: 20px;
  margin: 1px;
  outline: none;
  padding: 5px 10px;
  width: 170px;
}

.disconnected {
  background-color: #004A7F;
  border-radius: 10px;
  border: none;
  color: #FFFFFF;
  cursor: pointer;
  font-size: 20px;
  margin: 1px;
  outline: none;
  padding: 5px 10px;
  width: 170px;
}

.connected {
  background-color: #0094FF;
  border-radius: 10px;
  border: none;
  box-shadow: 0 0 20px #0094FF;
  color: #FFFFFF;
  cursor: pointer;
  font-size: 20px;
  margin: 1px;
  outline: none;
  padding: 5px 10px;
  width: 170px;
}

@keyframes glowing {
  0% {
    background-color: #004A7F;
    box-shadow: 0 0 3px #004A7F;
  }
  50% {
    background-color: #0094FF;
    box-shadow: 0 0 10px #0094FF;
  }
  100% {
    background-color: #004A7F;
    box-shadow: 0 0 3px #004A7F;
  }
}