.test {
  display: inline-block;
  height: 100px;
  width: 200px;
  background: teal;
}
.test button {
  margin: 25px;
}
.test button {
  margin: 25px;
  background: rgba(0, 0, 0, 0);
  background-image: linear-gradient(rgba(26, 26, 26, 0), rgba(0, 0, 0, 0));
  border-left: 1px solid rgba(0, 0, 0, 0.2);
  border-right: 1px solid rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  border-top: 1px solid rgba(0, 0, 0, 0.01);
  border-radius: 3px;
  padding: 8px 14px;
  color: white;
  font-size: 18px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-shadow: 0 1px rgba(255, 255, 255, 0.25);
  border: 1px solid rgba(0, 0, 0, 0.5);
  border-top: 1px solid rgba(0, 0, 0, 0.01);
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0icmdiYSgyNTUsIDI1NSwgMjU1LCAwLjA3KSIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSJyZ2JhKDI1NSwgMjU1LCAyNTUsIDAuMikiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9InJnYmEoMjU1LCAyNTUsIDI1NSwgMC4wNykiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(255, 255, 255, 0.07)), color-stop(50%, rgba(255, 255, 255, 0.2)), color-stop(100%, rgba(255, 255, 255, 0.07)));
  background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.07));
  background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.07));
  background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.07));
  background-image: linear-gradient(top, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.07));
}

.test button:hover {
  background-image: linear-gradient(rgba(13, 13, 13, 0), rgba(0, 0, 0, 0));
}

.test button:active {
  background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(13, 13, 13, 0));
}

.test button:hover {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0icmdiYSgyNTUsIDI1NSwgMjU1LCAwLjEpIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9InJnYmEoMjU1LCAyNTUsIDI1NSwgMC4yKSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0icmdiYSgyNTUsIDI1NSwgMjU1LCAwLjEpIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(255, 255, 255, 0.1)), color-stop(50%, rgba(255, 255, 255, 0.2)), color-stop(100%, rgba(255, 255, 255, 0.1)));
  background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
  background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
  background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
  background-image: linear-gradient(top, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
}

.test button:active {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0icmdiYSgyNTUsIDI1NSwgMjU1LCAwLjE1KSIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSJyZ2JhKDI1NSwgMjU1LCAyNTUsIDAuMDcpIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSJyZ2JhKDI1NSwgMjU1LCAyNTUsIDAuMTUpIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(255, 255, 255, 0.15)), color-stop(50%, rgba(255, 255, 255, 0.07)), color-stop(100%, rgba(255, 255, 255, 0.15)));
  background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.15));
  background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.15));
  background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.15));
  background-image: linear-gradient(top, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.15));
}


.test2 {
  display: inline-block;
  height: 100px;
  width: 200px;
  background: #444444;
}

.test2 button {
  margin: 25px;
}

.test2 button {
  background: rgba(0, 0, 0, 0);
  background-image: linear-gradient(rgba(26, 26, 26, 0), rgba(0, 0, 0, 0));
  border-left: 1px solid rgba(0, 0, 0, 0.2);
  border-right: 1px solid rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  border-top: 1px solid rgba(0, 0, 0, 0.01);
  border-radius: 3px;
  padding: 8px 14px;
  color: white;
  font-size: 18px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-shadow: 0 1px rgba(255, 255, 255, 0.25);
  border: 1px solid rgba(0, 0, 0, 0.5);
  border-top: 1px solid rgba(0, 0, 0, 0.01);
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0icmdiYSgyNTUsIDI1NSwgMjU1LCAwLjA3KSIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSJyZ2JhKDI1NSwgMjU1LCAyNTUsIDAuMikiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9InJnYmEoMjU1LCAyNTUsIDI1NSwgMC4wNykiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(255, 255, 255, 0.07)), color-stop(50%, rgba(255, 255, 255, 0.2)), color-stop(100%, rgba(255, 255, 255, 0.07)));
  background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.07));
  background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.07));
  background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.07));
  background-image: linear-gradient(top, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.07));
}

.test2 button:hover {
  background-image: linear-gradient(rgba(13, 13, 13, 0), rgba(0, 0, 0, 0));
}

.test2 button:active {
  background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(13, 13, 13, 0));
}

.test2 button:hover {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0icmdiYSgyNTUsIDI1NSwgMjU1LCAwLjEpIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9InJnYmEoMjU1LCAyNTUsIDI1NSwgMC4yKSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0icmdiYSgyNTUsIDI1NSwgMjU1LCAwLjEpIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(255, 255, 255, 0.1)), color-stop(50%, rgba(255, 255, 255, 0.2)), color-stop(100%, rgba(255, 255, 255, 0.1)));
  background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
  background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
  background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
  background-image: linear-gradient(top, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
}

.test2 button:active {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0icmdiYSgyNTUsIDI1NSwgMjU1LCAwLjE1KSIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSJyZ2JhKDI1NSwgMjU1LCAyNTUsIDAuMDcpIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSJyZ2JhKDI1NSwgMjU1LCAyNTUsIDAuMTUpIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(255, 255, 255, 0.15)), color-stop(50%, rgba(255, 255, 255, 0.07)), color-stop(100%, rgba(255, 255, 255, 0.15)));
  background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.15));
  background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.15));
  background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.15));
  background-image: linear-gradient(top, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.15));
}


.test3 {
  display: inline-block;
  height: 100px;
  width: 200px;
  background: white;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iNTAlIiB4Mj0iMTAwJSIgeTI9IjUwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzgwMDAwMCIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjZmZhNTAwIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDgwIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #800000), color-stop(50%, #ffa500), color-stop(100%, #000080));
  background-image: -webkit-linear-gradient(left, #800000, #ffa500, #000080);
  background-image: -moz-linear-gradient(left, #800000, #ffa500, #000080);
  background-image: -o-linear-gradient(left, #800000, #ffa500, #000080);
  background-image: linear-gradient(left, #800000, #ffa500, #000080);
}

.test3 button {
  margin: 25px;
}

.test3 button {
  background: rgba(0, 0, 0, 0);
  background-image: linear-gradient(rgba(26, 26, 26, 0), rgba(0, 0, 0, 0));
  border-left: 1px solid rgba(0, 0, 0, 0.2);
  border-right: 1px solid rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  border-top: 1px solid rgba(0, 0, 0, 0.01);
  border-radius: 3px;
  padding: 8px 14px;
  color: white;
  font-size: 18px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-shadow: 0 1px rgba(255, 255, 255, 0.25);
  border: 1px solid rgba(0, 0, 0, 0.5);
  border-top: 1px solid rgba(0, 0, 0, 0.01);
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0icmdiYSgyNTUsIDI1NSwgMjU1LCAwLjA3KSIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSJyZ2JhKDI1NSwgMjU1LCAyNTUsIDAuMikiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9InJnYmEoMjU1LCAyNTUsIDI1NSwgMC4wNykiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(255, 255, 255, 0.07)), color-stop(50%, rgba(255, 255, 255, 0.2)), color-stop(100%, rgba(255, 255, 255, 0.07)));
  background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.07));
  background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.07));
  background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.07));
  background-image: linear-gradient(top, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.07));
}

.test3 button:hover {
  background-image: linear-gradient(rgba(13, 13, 13, 0), rgba(0, 0, 0, 0));
}

.test3 button:active {
  background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(13, 13, 13, 0));
}

.test3 button:hover {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0icmdiYSgyNTUsIDI1NSwgMjU1LCAwLjEpIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9InJnYmEoMjU1LCAyNTUsIDI1NSwgMC4yKSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0icmdiYSgyNTUsIDI1NSwgMjU1LCAwLjEpIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(255, 255, 255, 0.1)), color-stop(50%, rgba(255, 255, 255, 0.2)), color-stop(100%, rgba(255, 255, 255, 0.1)));
  background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
  background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
  background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
  background-image: linear-gradient(top, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
}

.test3 button:active {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0icmdiYSgyNTUsIDI1NSwgMjU1LCAwLjE1KSIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSJyZ2JhKDI1NSwgMjU1LCAyNTUsIDAuMDcpIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSJyZ2JhKDI1NSwgMjU1LCAyNTUsIDAuMTUpIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(255, 255, 255, 0.15)), color-stop(50%, rgba(255, 255, 255, 0.07)), color-stop(100%, rgba(255, 255, 255, 0.15)));
  background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.15));
  background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.15));
  background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.15));
  background-image: linear-gradient(top, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.15));
}


.test4 {
  display: inline-block;
  height: 100px;
  width: 200px;
  background: teal;
}

.test4 button {
  margin: 25px;
}

.test4 button {
  margin: 25px;
  background: rgba(0, 0, 0, 0);
  border-radius: 3px;
  border: none;
  padding: 8px 14px;
  color: white;
  font-size: 18px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-shadow: 0 1px rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.07);
}

.test4 button:hover {
  background: rgba(0, 0, 0, 0);
}

.test4 button:active {
  box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.2) inset;
}

.test4 button:hover {
  background: rgba(255, 255, 255, 0.08);
}


.test5 {
  display: inline-block;
  height: 100px;
  width: 200px;
  background: #444444;
}

.test5 button {
  margin: 25px;
}

.test5 button {
  background: rgba(0, 0, 0, 0);
  border-radius: 3px;
  border: none;
  padding: 8px 14px;
  color: white;
  font-size: 18px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-shadow: 0 1px rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.07);
}

.test5 button:hover {
  background: rgba(0, 0, 0, 0);
}

.test5 button:active {
  box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.2) inset;
}

.test5 button:hover {
  background: rgba(255, 255, 255, 0.08);
}


.test6 {
  display: inline-block;
  height: 100px;
  width: 200px;
  background: white;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iNTAlIiB4Mj0iMTAwJSIgeTI9IjUwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzgwMDAwMCIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjZmZhNTAwIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDgwIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #800000), color-stop(50%, #ffa500), color-stop(100%, #000080));
  background-image: -webkit-linear-gradient(left, #800000, #ffa500, #000080);
  background-image: -moz-linear-gradient(left, #800000, #ffa500, #000080);
  background-image: -o-linear-gradient(left, #800000, #ffa500, #000080);
  background-image: linear-gradient(left, #800000, #ffa500, #000080);
}

.test6 button {
  margin: 25px;
}

.test6 button {
  background: rgba(0, 0, 0, 0);
  border-radius: 3px;
  border: none;
  padding: 8px 14px;
  color: white;
  font-size: 18px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-shadow: 0 1px rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.07);
}

.test6 button:hover {
  background: rgba(0, 0, 0, 0);
}

.test6 button:active {
  box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.2) inset;
}

.test6 button:hover {
  background: rgba(255, 255, 255, 0.08);
}


.top {
  height: 20px;
}


button.bsimple {
  background: #cccccc;
  border-radius: 3px;
  border: none;
  padding: 8px 14px;
  color: #333333;
  font-size: 18px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-shadow: 0 1px rgba(255, 255, 255, 0.25);
}

button.bsimple:hover {
  background: #b3b3b3;
}

button.bsimple:active {
  box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.2) inset;
}


button.bbubbly {
  background: #cccccc;
  background-image: linear-gradient(#e6e6e6, #bfbfbf);
  border-left: 1px solid rgba(0, 0, 0, 0.2);
  border-right: 1px solid rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  border-top: 1px solid rgba(0, 0, 0, 0.01);
  border-radius: 3px;
  padding: 8px 14px;
  color: #333333;
  font-size: 18px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-shadow: 0 1px rgba(255, 255, 255, 0.25);
}

button.bbubbly:hover {
  background-image: linear-gradient(#d9d9d9, #cccccc);
}

button.bbubbly:active {
  background-image: linear-gradient(#bfbfbf, #d9d9d9);
}


button.bchunky {
  background: #cccccc;
  background-image: linear-gradient(#e6e6e6, #cccccc);
  border: 1px solid #bfbfbf;
  border-radius: 3px;
  padding-top: 6px;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 6px;
  color: #333333;
  font-size: 18px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-shadow: 0 1px rgba(255, 255, 255, 0.25);
  box-shadow: rgba(255, 255, 255, 0.29804) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.70196) 0px 3px 7px 0px;
  -webkit-box-shadow: rgba(255, 255, 255, 0.29804) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.70196) 0px 3px 7px 0px;
}

button.bchunky:hover {
  background: #bababa;
  box-shadow: rgba(0, 0, 0, 0.20196) 0px 1px 2px 0px inset;
  -webkit-box-shadow: rgba(0, 0, 0, 0.20196) 0px 1px 2px 0px inset;
}


button.bgoogle {
  background: #f8f8f8;
  border: 1px solid #e4e4e4;
  border-radius: 2px;
  font-weight: bold;
  padding-top: 5px;
  padding-bottom: 7px;
  padding-left: 10px;
  padding-right: 10px;
  color: #444444;
  font-family: arial, sans-serif;
  font-size: 12.90909px;
}

button.bgoogle:hover {
  cursor: default;
  background: #ebebeb;
  border: 1px solid #b8b8b8;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

button.bgoogle:active {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
}

button.bgoogle:active.blue {
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2) inset;
}


button.bgoogle.blue {
  background: #4d90fe;
  border: 1px solid #2477fe;
  border-radius: 2px;
  font-weight: bold;
  padding-top: 5px;
  padding-bottom: 7px;
  padding-left: 10px;
  padding-right: 10px;
  color: white;
  font-family: arial, sans-serif;
  font-size: 12.90909px;
}

button.bgoogle.blue:hover {
  cursor: default;
  background: #3480fe;
  border: 1px solid #014dca;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

button.bgoogle.blue:active {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
}

button.bgoogle.blue:active.blue {
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2) inset;
}


button.bgithub {
  background-color: #eaeaea;
  background-image: linear-gradient(#ffffff, #eaeaea);
  border: 1px solid #c4c4c4;
  border-bottom: 1px solid #aaaaaa;
  border-radius: 3px;
  font-weight: bold;
  padding: 4px 10px;
  text-shadow: 0 1px rgba(255, 255, 255, 0.9);
  color: #333333;
  font-family: Helvetica, arial, freesans, clean, sans-serif;
  font-size: 12.8;
}

button.bgithub:hover {
  background-image: linear-gradient(#f0f0f0, #dcdcdc);
}

button.bgithub:active {
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2) inset;
}


button.bgithub.invert {
  background-color: #eaeaea;
  background-image: linear-gradient(#ffffff, #eaeaea);
  border: 1px solid #c4c4c4;
  border-bottom: 1px solid #aaaaaa;
  border-radius: 3px;
  font-weight: bold;
  padding: 4px 10px;
  text-shadow: 0 1px rgba(255, 255, 255, 0.9);
  color: #b33630;
  font-family: Helvetica, arial, freesans, clean, sans-serif;
  font-size: 12.8;
}

button.bgithub.invert:hover {
  background: #b33630;
  background-image: linear-gradient(#ce4e48, #b33630);
  border: 1px solid #ab342e;
  border-top: 1px solid #972e28;
  color: #eaeaea;
  font-size: 12.8;
  font-family: Helvetica, arial, freesans, clean, sans-serif;
  text-shadow: 0 1px #ab342e;
  text-shadow: 0 -1px #ab342e;
}

button.bgithub.invert:active {
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2) inset;
}


button.bfacebook {
  background: #5b74a8;
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.2)), to(#5b74a8), color-stop(0.07, #5b74a8));
  border: 1px solid #2c3789;
  box-shadow: 0 1px rgba(0, 0, 0, 0.15);
  font-weight: bold;
  padding: 5px 16px;
  color: white;
  font-family: "lucida grande", tahoma, verdana, arial, sans-serif;
  font-size: 11px;
}

button.bfacebook.gray {
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.2)), to(#5b74a8), color-stop(0.07, #5b74a8));
  border: 1px solid #2c3789;
}

button.bfacebook:active {
  background: #5b74a8;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35) inset;
}


button.bfacebook.gray {
  background: #eeeeee;
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.2)), to(#eeeeee), color-stop(0.07, #eeeeee));
  border: 1px solid #888888;
  box-shadow: 0 1px rgba(0, 0, 0, 0.15);
  font-weight: bold;
  padding: 5px 16px;
  color: #333333;
  font-family: "lucida grande", tahoma, verdana, arial, sans-serif;
  font-size: 11px;
}

button.bfacebook.gray.gray {
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.2)), to(#eeeeee), color-stop(0.07, #eeeeee));
  border: 1px solid #888888;
}

button.bfacebook.gray:active {
  background: #eeeeee;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35) inset;
}


button.bdelicious {
  background: #3274d1;
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.2)), to(#3274d1), color-stop(0.03, #3274d1));
  border: 1px solid #2458a2;
  font-weight: bold;
  padding: 12px 18px;
  text-shadow: 0 -1px rgba(0, 0, 0, 0.25);
  color: white;
  font-family: "Helvetica Neue", HelveticaNeue, "Droid Sans", Roboto, Helvetica, sans-serif;
  font-size: 16px;
}

button.bdelicious:hover {
  background: #4f88d8;
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.2)), to(#4f88d8), color-stop(0.03, #4f88d8));
}

button.bdelicious:active {
  background: #2e6fcb;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
}


.small {
  border-radius: 2px;
  font-size: 16px !important;
  font-weight: normal;
  padding: 2px 10px !important;
}


.large {
  border-radius: 4px;
  font-size: 32px !important;
  padding: 12px 19px !important;
}

.large + ul {
  width: 200px !important;
}


.button-group {
  width: auto;
  display: inline-block;
}

.button-group > button {
  border-left: 1px solid rgba(255, 255, 255, 0.4) !important;
  border-right: 1px solid rgba(0, 0, 0, 0.3) !important;
  border-radius: 0 !important;
  margin: 0;
  float: left;
}

.button-group > button:active {
  border-left: 1px solid rgba(0, 0, 0, 0.3);
}

.button-group button:first-child {
  border-right: 1px solid rgba(0, 0, 0, 0.3) !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-top-left-radius: 3px !important;
  border-bottom-left-radius: 3px !important;
  margin: 0;
  float: left;
}

.button-group button:last-child {
  border-left: 1px solid rgba(255, 255, 255, 0.4) !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-top-right-radius: 3px !important;
  border-bottom-right-radius: 3px !important;
  margin: 0;
  float: left;
}

.button-group button:last-child:active {
  border-left: 1px solid rgba(0, 0, 0, 0.3);
}


.button-drop {
  display: inline-block;
}

.button-drop ul {
  background: white;
  border-radius: 5px;
  border: 1px solid rgba(0, 0, 0, 0.3);
  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.2);
  display: none;
  list-style: none;
  margin-left: 0;
  margin-top: 3px;
  padding-left: 0;
  position: absolute;
  width: 150px;
}

.button-drop ul li {
  cursor: pointer;
  font-size: 12px;
  line-height: 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.button-drop ul li a {
  display: block;
  margin: 0;
  padding: 8px 0px 8px 8px;
  text-decoration: none;
  width: 100%;
}

.button-drop ul li.header {
  background-image: linear-gradient(#fafafa, #eaeaea);
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  font-weight: bold;
  padding: 8px 0px 8px 8px;
  text-shadow: 0 1px white;
}

.button-drop ul li.header:hover {
  background-image: linear-gradient(#fafafa, #eaeaea) !important;
}

.button-drop ul li:hover {
  background: #364dfb;
}

.button-drop ul li:hover a {
  color: white;
}

.button-drop ul li:first-child {
  border-radius: 5px 5px 0 0;
}

.button-drop ul li:last-child {
  border-radius: 0 0 5px 5px;
  border-bottom: none;
}