/* Shine yer buttons guv? */

button::-moz-focus-inner {
  padding: 0 !important;
  border: 0 none !important;
}
[class^="btn"] {

white-space: pre;
  overflow: visible;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-appearance: button;
  -webkit-appearance: none;

text-rendering: optimizeLegibility;
  will-change: transform, box-shadow, text-shadow;
  
  /* Safari fix for thin text on hover */
  -webkit-font-smoothing: subpixel-antialiased;
 
  position: relative;
  display: inline-block;
  font-size: inherit;
  font-weight: 100;
  line-height: 3em;
  text-align: center;
  text-decoration: none !important;
  cursor: pointer;
  margin: 1rem;
  outline: 0 solid;
  border: 1px solid;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.25),
    0 1px 0 rgba(255, 255, 255, 0.25) inset,
    0 0 0 rgba(0, 0, 0, 0.5) inset,
    0 1.25em 0 rgba(255, 255, 255, 0.08) inset,
    0 -1.25em 1.25em rgba(0, 0, 0, 0.3) inset,
    0 1.25em 1.25em rgba(255, 255, 255, 0.1) inset;
  transition: box-shadow 0.3s ease-out,  transform 0.3s ease-out;
}
[class^="btn--rect"] {
  padding: 0 1rem;
  border-radius: .25rem;
}
[class^="btn--rnd"] {
  padding: 0;
  border-radius: 50%;
}

[class^="btn"]:hover {
  box-shadow:
    0 .25em .5em rgba(0, 0, 0, 0.5),
    0 1px 0 rgba(255, 255, 255, 0.25) inset,
    0 0 0 rgba(0, 0, 0, 0.25) inset,
    0 1.25em 0 rgba(255, 255, 255, 0.03) inset,
    0 -1.25em 1.25em rgba(0, 0, 0, 0.15) inset,
    0 1.25em 1.25em rgba(255, 255, 255, 0.05) inset;
}
[class^="btn"]:focus {
  outline: 0 solid;
/*   outline: 4px solid #0ff; */
  box-shadow:
    0 .125em .5em rgba(0, 0, 0, 1),
    0 1px 0 rgba(255, 255, 255, 0.25) inset,
    0 0 0 rgba(0, 0, 0, 0.25) inset,
    0 1.25em 0 rgba(255, 255, 255, 0.03) inset,
    0 -1.25em 1.25em rgba(0, 0, 0, 0.15) inset,
    0 1.25em 1.25em rgba(255, 255, 255, 0.05) inset;
}

[class^="btn--rect"]:hover {
  will-change: transform, box-shadow, text-shadow;
  transform: scale(1.02);
}
[class^="btn--rnd"]:hover {
  will-change: transform, box-shadow;
  transform: scale(1.15);
}
[class^="btn"].-js-clicked {
  animation: btn-pressed .3s ease-out forwards;
}

@keyframes btn-pressed {
  50% {
    transform: scale(.985);
    box-shadow:
      0 0 0 rgba(255, 255, 255, 0),
      0 1px 0 rgba(255, 255, 255, 0) inset,
      0 0 .5em rgba(0, 0, 0, 0.5) inset,
      0 1.25em 0 rgba(255, 255, 255, 0.03) inset,
      0 -1.25em 1.25em rgba(0, 0, 0, 0.15) inset,
      0 1.25em 1.25em rgba(255, 255, 255, 0.05) inset;
  }
}

[class^="btn--rect"]::before {
  content: "";
  display: block;
  position: absolute;
  background:-webkit-gradient(linear, left top, right top, from(rgba(255,255,255,0)),color-stop(50%, rgba(255,255,255,1)),to(rgba(255,255,255,0)));
background:-webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);
background:-o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);
background:linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);
  padding: 0 12px;
  top: 0;
  left: 15%;
  height: 1px;
  width: 40%;
  box-shadow: 0 1px 5px rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease-in-out 0s;
}
[class^="btn--rect"]:active::before {
  opacity: 0;
}
[class^="btn--rect"]:hover::before,
[class^="btn--rect"]:focus::before {
  left: 45%;
}
/* Button colours defined here */

[class^="btn--"][class*="--white"] {
  color: #fff; 
  font-weight: 100;
  letter-spacing: .025em;
  text-shadow: 0 0 2px #000;
}
[class^="btn--"][class*="--black"] {
  color: #000;
  font-weight: 400;
}

[class^="btn--"][class*="--white-gray"] {
  background-color: #555;
  border-color:  #222;
}

[class^="btn--"][class*="--white-red"] {
  background-color: #f00;
  border-color:  #500;
}
[class^="btn--"][class*="--white-green"] {
  /* Brightest WCAG 2 green with text-shadow */
  background-color: #009700;
  border-color:  #050;
}
[class^="btn--"][class*="--white-blue"] {
  background-color: #00f;
  border-color:  #007;
}

[class^="btn--"][class*="--white-white"] {
  /* Fails WCAG 2 */
  background-color: #fff;
  border-color: #777;
}
[class^="btn--"][class*="--black-black"] {
  /* Fails WCAG 2 */
  background-color: #000;
  border-color: #777;
  text-shadow: 0 0 2px #fff;
}

[class^="btn--"][class*="--white-black"] {
  background-color: #000;
  border-color:  #000;
}
[class^="btn--"][class*="--black-white"] {
  background-color: #fff;
  border-color:  #777;
}

[class^="btn--"][class*="--white-purple"] {
  background-color: #4b3f5e;
  border-color: #291b38;
}

[class^="btn--"][class*="--white-cyan"] {
  /* Fails WCAG 2 */
  background-color: #0ff;
  border-color: #099;
}
[class^="btn--"][class*="--black-cyan"] {
  background-color: #0ff;
  border-color: #099;
}

[class^="btn--"][class*="--white-twitter"] {
  /* Fails WCAG 2 */
  background-color: #1DA1F2;
  border-color: #066;
}
[class^="btn--"][class*="--black-twitter"] {
  background-color: #1DA1F2;
  border-color: #066;
}

[class^="btn--"][class*="--white-orange"] {
  /* Closest WCAG 2 pass to #f60 with textshadow */
  background-color: #d94000; /*#f60;*/
  border-color: #930;
}
[class^="btn--"][class*="--black-orange"] {
  background-color: #f60;
  border-color: #930;
}

</style>

</head>
<body>

<main>

<h1>Buttons, link buttons, and interaction animation</h1>

<section>
  <h2>HTML:</h2>
  <p>Full description: <a class="lnk" href="https://websemantics.uk/articles/shiny-buttons/" target="_blank" title="[new window]">Shiny CSS buttons</a></p>
  
  <div class=container>

<a class="btn--rect--white-gray" href="https://github.com/livebloggerofficial?tab=repositories" target="_blank">Going somewhere</a>
    
    <button class=btn--rect--white-gray>Doing something</button>

<a class="btn--rect--white-gray" href="https://github.com/livebloggerofficial?tab=repositories" target="_blank">Going somewhere</a>

<button class=btn--rect--white-blue>Doing something</button>

<a class="btn--rect--white-red" href="#">Going somewhere</a>

<button class=btn--rect--white-green>Doing something</button>

<a class="btn--rect--white-purple" href="#">Going somewhere</a>

<button class=btn--rect--white-white>Not accessible</button>

<a class="btn--rect--black-black" href="#">Not accessible</a>

<button class=btn--rect--black-white>Doing something</button>

<a class="btn--rect--white-cyan" href="#">Not accessible</a>

<button class=btn--rect--black-cyan>Doing something</button>

<a class="btn--rect--white-twitter" href="#">Not accessible</a>

<button class=btn--rect--black-twitter>Doing something</button>

<a class="btn--rect--white-orange" href="#">Not accessible</a>

<button class=btn--rect--black-orange>Doing something</button>
    
  
  </div>
</section>

<script  src="./script.js"></script>

</body>
</html>

demo

Code Preview

Popular Posts

Pages

Buttons, link buttons, and interaction animation