button-styles vert gradient flex

button-styles-vert-gradient-flex.markdown

button-styles vert gradient flex

A Pen by Sebastian Rothbucher on CodePen.

License.

index.html

<button style="height: 20px" onclick="alert('whatcha want?')">
  <span>
  <svg height="20" width="20">
    <defs>
      <linearGradient id="grd" x1="0%" y1="100%" x2="0%" y2="0%">
        <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 20 0 l 0 -10 l 0 -10 z" fill="url(#grd)"/>
    <path d="m 11 2 l -9 9 l 0 7 l 18 0 l 0 -9 l 0 -7 z" fill="white" class="notonhover"/>
  </svg>
  <svg height="20" width="10">
    <defs>
      <linearGradient id="grd" x1="0%" y1="100%" x2="0%" y2="0%">
        <stop offset="5%"  stop-color="blue"/>
        <stop offset="95%" stop-color="turquoise"/>
      </linearGradient>
    </defs>
    <rect x="0" y="0" width="100%" height="20"  fill="url(#grd)"/>
    <rect x="0" y="2" width="100%" height="16"  fill="white" class="notonhover"/>
  </svg>
  <svg height="20" width="20">
    <defs>
      <linearGradient id="grd" x1="0%" y1="100%" x2="0%" y2="0%">
        <stop offset="5%"  stop-color="blue"/>
        <stop offset="95%" stop-color="turquoise"/>
      </linearGradient>
    </defs>
    <path d="m 0 20 l 10 0 l 10 -10 l 0 -10 l -20 0 z" fill="url(#grd)"/>
    <path d="m 0 18 l 9 0 l 9 -9 l 0 -7 l -18 0 z" fill="white" class="notonhover"/>
  </svg>
  </span>
  <!-- progressive enhancement -->
  Click me
</button>
<br /><br />
<input oninput="document.getElementsByTagName('button')[0].lastChild.nodeValue=event.target.value" value="Click me" />

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;
  padding: 0 20px 1px 20px;
}
button span {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-flex-direction: row;
  flex-direction: row;
}
button:focus,
button:hover {
  color: white;
}
button svg:nth-child(1) {
}
button svg:nth-child(2) {
  -webkit-flex-grow: 1;
  flex-grow: 1;
}
button svg:nth-child(3) {
}
button .notonhover {
  transition: opacity 0.5s;
  opacity: 1;
}
button:focus .notonhover,
button:hover .notonhover {
  opacity: 0;
}