button-styles

button-styles.markdown

button-styles

A Pen by Sebastian Rothbucher on CodePen.

License.

index.html

<button style="width: 100px; height: 20px" onclick="alert('whatcha want?')">
  <svg height="20" width="100">
    <defs>
      <linearGradient id="grd">
        <stop offset="5%"  stop-color="blue"/>
        <stop offset="95%" stop-color="turquoise"/>
      </linearGradient>
    </defs>
    <path d="m 10 0 l -10 10 l 0 10 l 90 0 l 10 -10 l 0 -10 z" fill="url(#grd)"/>
    <path d="m 11 2 l -9 9 l 0 7 l 87 0 l 9 -9 l 0 -7 z" fill="white" class="notonhover"/>
  </svg>
  <!-- progressive enhancement -->
  Click me
</button>

style.css

button {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  appearance: none;
  background: none;
  border: none;
  position: relative;
  color: black;
  transition: color 0.5s;
}
button:focus,
button:hover {
  color: white;
}
button svg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
}
button .notonhover {
  transition: opacity 0.5s;
  opacity: 1;
}
button:focus .notonhover,
button:hover .notonhover {
  opacity: 0;
}