টেমপ্লেট:Button glossy.css

.glossy-button {
  display: inline-block;
  position: relative;
  background-color: #AAA;
  background-image: linear-gradient( /* chrome */
    hsla(0, 0%, 100%, 0.6), hsla(0, 0%, 100%, 0) 50%,
    hsla(0, 0%, 0%, 0.3) 50%, hsla(0, 0%, 100%, 0.2)
  );
  font-size: 22px;
  font-family: sans-serif;
  font-weight: bold;
  color: white;
  padding: 20px 40px;
  text-shadow:
    0 0 15px hsla(0, 0%, 100%, 1), /* bloom */
    0 2px 4px hsla(0, 0%, 0%, 0.7); /* drop shadow */
  border: none;
  border-radius: 50px;
  margin: 10px;
  box-shadow:
    inset 0 -5px 20px hsla(0, 0%, 0%, 0.4), /* top light */
    inset 0 5px 20px hsla(0, 0%, 100%, 0.4), /* bottom shadow */
    /* multiple light sources yall */
    -8px 8px 5px hsla(0, 0%, 0%, 0.15), /* drop shadow 1 */
    5px 18px 10px hsla(0, 0%, 0%, 0.2); /* drop shadow 2 */
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.1s;
}

/* highlight */
.glossy-button:before {
  content: '';
  display: block;
  position: absolute;
  left: 20px;
  right: 20px;
  top: 5px;
  height: 30px;
  border-radius: 15px;
  background: linear-gradient(
    hsla(0, 0%, 100%, 0.8), hsla(0, 0%, 100%, 0) );
}

.glossy-button--blue { background-color: #19F; }
.glossy-button--gold { background-color: #EA0; }
.glossy-button--green { background-color: #6C6; }
.glossy-button--red { background-color: #E21; }

.glossy-button:hover {
  transform: scale(1.05);
  box-shadow:
    inset 0 -5px 20px hsla(0, 0%, 0%, 0.4), /* top light */
    inset 0 5px 20px hsla(0, 0%, 100%, 0.4), /* bottom shadow */
    /* multiple light sources yall */
    -12px 12px 5px hsla(0, 0%, 0%, 0.15), /* drop shadow 1 */
    10px 25px 10px hsla(0, 0%, 0%, 0.2); /* drop shadow 2 */
}