I need help adding keyboard focus to my Buttons - button

Question

I'm creating some Material Design buttons and I'm having some issues getting keyboard tab focus to work with my buttons. Ideally what I would like to do is mimic the effect found in Material UI when you tab through patterns:(https://material-ui-next.com/demos/buttons/), However, I would be happy with just getting focus to work.
I've tried adding class: focus to no avail. Any help would be appreciated
Codepen
<!-- header -->
<header>
<h2 tabindex="0">Material Design Buttons</h2>
</header>
<!-- #end header -->
<!-- Main content -->
<main role="main">
<section>
<h3 class="heading">Raised Buttons</h3>
<div class="wrap">
<div class="holder col-4">
<div class="demo"><button class="rkmd-btn btn-lightBlue" tabindex="0">Primary</button></div>
<div class="captions">Normal Button</div>
</div>
<div class="holder col-4">
<div class="demo"><button class="rkmd-btn btn-lightBlue ripple-effect" tabindex="0">Primary</button></div>
<div class="captions">keyboard Focus</div>
</div>
<div class="holder col-4">
<div class="demo"><button class="rkmd-btn btn-lightBlue ripple-effect" tabindex="0">Primary</button></div>
<div class="captions">Ripple Effect</div>
</div>
<div class="holder col-4">
<div class="demo"><button class="rkmdgrey-btn" disabled tabindex="0">Primary</button></div>
<div class="captions">Disabled Button</div>
</div>
</div>
</section>
<section>
<h3 class="heading">Raised Buttons Secondary</h3>
<div class="wrap">
<div class="holder col-4">
<div class="demo"><button class="rkmdWhite-btn Nutrien-greenSecondary" tabindex="0">Secondary</button></div>
<div class="captions">Normal Button</div>
</div>
<div class="holder col-4">
<div class="demo"><button class="rkmdWhite-btn Nutrien-greenSecondary ripple-effect" tabindex="0">Secondary</button></div>
<div class="captions">Ripple Effect</div>
</div>
<div class="holder col-4">
<div class="demo"><button class="rkmdWhite-btn Nutrien-greenSecondary ripple-effect" tabindex="0">Secondary</button></div>
<div class="captions">Keyboard Focus</div>
</div>
<div class="holder col-4">
<div class="demo"><button class="rkmdgrey-btn" disabled tabindex="0">Secondary</button></div>
<div class="captions">Disabled Button</div>
</div>
</div>
</section>
<section>
<h3 class="heading">Raised Buttons</h3>
<div class="wrap">
<div class="holder col-4">
<div class="demo"><button class="rkmdYellow-btn $Nutrien-green" tabindex="0">CTA</button></div>
<div class="captions">Normal Button</div>
</div>
<div class="holder col-4">
<div class="demo"><button class="rkmdYellow-btn $Nutrien-green ripple-effect" tabindex="0">CTA</button></div>
<div class="captions">Ripple Effect</div>
</div>
<div class="holder col-4">
<div class="demo"><button class="rkmdYellow-btn $Nutrien-green ripple-effect" tabindex="0">CTA</button></div>
<div class="captions">Keyboard Focus</div>
</div>
<div class="holder col-4">
<div class="demo"><button class="rkmdgrey-btn" disabled tabindex="0">CTA</button></div>
<div class="captions">Disabled Button</div>
</div>
</div>
</section>
<!-- <section>
<h3 class="heading">Raised Buttons Yellow</h3>
<div class="wrap">
<div class="holder col-3">
<div class="demo"><button class="rkmdYellow-btn $Nutrien-yellow">Button</button></div>
<div class="captions">Normal Button</div>
</div>
<div class="holder col-3">
<div class="demo"><button class="rkmdYellow-btn $Nutrien-yellow ripple-effect">Button</button></div>
<div class="captions">Ripple Effect</div>
</div>
<div class="holder col-3">
<div class="demo"><button class="rkmd-btn btn-lightBlue" disabled>Button</button></div>
<div class="captions">Disabled Button</div>
</div>
</div>
</section> -->
<!-- <section>
<h3 class="heading">Link Buttons</h3>
<div class="wrap">
<div class="holder col-3">
<div class="demo"><button class="rkmd-btn btn-link">Button</button></div>
<div class="captions">Link Button</div>
</div>
<div class="holder col-3">
<div class="demo"><button class="rkmd-btn btn-link ripple-effect"><i class="material-icons">favorite_border</i>Button</button></div>
<div class="captions">Ripple Effect</div>
</div>
<div class="holder col-3">
<div class="demo"><button class="rkmd-btn btn-link" disabled>Button</button></div>
<div class="captions">Disabled Button</div>
</div>
</div>
</section> -->
<section>
<h3 class="heading">Buttons in Different Colors</h3>
<div class="wrap">
<div class="holder col-4">
<div class="demo"><button class="rkmdTert-btn btn-white ripple-effect ripple-dark" tabindex="0">Tertiary Link</button></div>
<div class="captions">White</div>
</div>
<div class="holder col-4">
<div class="demo"><button style="border: none;" class="rkmd-btn btn-black ripple-effect" tabindex="0">Lorem Ipsum</button></div>
<div class="captions">Black</div>
</div>
<!-- <div class="holder col-4">
<div class="demo"><button class="rkmd-btn btn-grey ripple-effect ripple-dark"><i class="material-icons">file_download</i>Download</button></div>
<div class="captions">Grey</div>
</div>
<div class="holder col-4">
<div class="demo"><button class="rkmd-btn btn-lightBlue ripple-effect"><i class="material-icons">file_download</i>Download</button></div>
<div class="captions">Green</div>
</div> -->
</section>
<!-- <section>
<h3 class="heading">Fab Buttons</h3>
<div class="wrap">
<div class="holder col-3">
<div class="demo"><button style="background: #ffffff; border: none; shadow: none;" class="rkmd-btn btn-fab btn-lightBlue ripple-effect"><i style="color: black;" class="material-icons">attach_file</i></button></div>
<div class="captions">Normal Button</div>
</div>
<div class="holder col-3">
<div class="demo"><button class="rkmd-btn btn-fab-mini btn-pink ripple-effect"><i class="material-icons">favorite_border</i></button></div>
<div class="captions">Mini Button</div>
</div>
<div class="holder col-3">
<div class="demo"><button class="rkmd-btn btn-fab-mini btn-lightBlue" disabled><i class="material-icons">cloud_upload</i></button></div>
<div class="captions">Disabled Button</div>
</div>
</div>
</section> -->
</main>
// Buttons Color
$Nutrien-green: #00B455;
$Nutrien-green--hover: #00DD68;
$Nutrien-greenSecondary: #FFF;
$Nutrien-greenSecondary--hover: #00DD68;
$Nutrien-yellow: #F9E051;
$Nutrien-yellow--hover: #E9CE1A;
$Nutrien-disabled: #DFDFDF;
$btn_default: #e0e0e0;
$btn_lightBlue: #00B455;
$btn_white: #FFF;
$btn_black: #111;
$btn_grey: #f5f5f5;
$btn_orange: #ff9800;
$btn_amber: #ffc107;
$btn_green: #4caf50;
$btn_teal: #009688;
$btn_cyan: #00bcd4;
$btn_indigo: #3f51b5;
$btn_deepPurple: #673ab7;
$btn_pink: #e91e63;
$btn_red: #f44336;
$btn_yellow: #ffeb3b;
$btn_lime: #cddc39;
$btn_brown: #795548;
// KEYFRAMES
#mixin keyframes($animation-name) {
#-webkit-keyframes #{$animation-name} {
#content;
}
#-moz-keyframes #{$animation-name} {
#content;
}
#-ms-keyframes #{$animation-name} {
#content;
}
#-o-keyframes #{$animation-name} {
#content;
}
#keyframes #{$animation-name} {
#content;
}
}
// Column generator
#mixin colmk($numRows, $margin) {
width: ((100% - (($numRows - 1) * $margin)) / $numRows);
&:nth-child(n) {
margin-right: $margin;
margin-bottom: $margin;
}
&:nth-child(#{$numRows}n) {
margin-right: 0;
margin-bottom: 0;
}
}
/* -----------------------------------------------------
Body
-------------------------------------------------------- */
body {
margin: 0;
padding: 0;
color: #646360;
font-size: 16px;
font-family: arial;
background-color: #eee;
}
*, *::after, *::before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
a {
color: #03a9f4;
outline: none;
text-decoration: none;
&:hover { text-decoration: underline; }
}
/* -----------------------------------------------------
Main
-------------------------------------------------------- */
main {
width: 100%;
max-width: 940px;
margin: 1.4rem auto;
section {
display: block;
margin-bottom: 1.4rem;
padding: 1.2rem;
background-color: #fff;
box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.157);
&:last-child { margin-bottom: 0; }
.heading {
margin: 0;
padding: 0;
font-size: 1.2rem;
}
.wrap {
overflow: hidden;
display: block;
margin: 1rem 0 0.8rem;
text-align: center;
.holder {
float: left;
//display: inline-block;
//margin-right: 8px;
//margin-bottom: 8px;
text-align: center;
background-color: #fff;
&:last-child { margin-right: 0; }
&.col-3 {
//width: calc(100% / 3 - 8px);
#include colmk(3, 1%);
}
&.col-4 {
//width: calc(100% / 4 - 9px);
//&:nth-child(4n) { margin-right: 0; }
#include colmk(4, 1%);
}
.demo {
min-height: 120px;
padding: 2em 0;
display: flex;
justify-content: center;
align-content: center;
}
.captions {
padding: 8px;
color: rgba(0,0,0,0.5);
font-size: 13px;
font-weight: bold;
border-top: 1px solid rgba(0,0,0,0.1);
}
#media only screen and (max-width: 860px) {
&.col-4 {
#include colmk(3, 1%);
}
}
#media only screen and (max-width: 640px) {
float: none;
&.col-3,
&.col-4 {
display: block;
width: 100%;
&:nth-child(n) { margin: 0; margin-bottom: 14px; }
}
}
}
}
}
#media only screen and (max-width: 960px) {
padding: 0 1.5%;
}
}
/* -----------------------------------------------------
Header
-------------------------------------------------------- */
header {
display: block;
width: 100%;
padding: 12px 0;
text-align: center;
background-color: #FFF;
box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.1);
h2 {
margin: 0;
padding: 25px 0;
font-size: 2em;
font-weight: 300;
letter-spacing: 1px;
}
}
/* -----------------------------------------------------
Footer
-------------------------------------------------------- */
footer {
display: block;
overflow: hidden;
width: 100%;
min-height: 80px;
background-color: #FFF;
border-top: 1px solid #EEE;
.row {
width: 100%;
max-width: 860px;
margin: 0 auto;
}
.footer-content {
margin: 0 8px;
padding: 25px 0 18px;
text-align: center;
span {
color: rgba(0, 0, 0, 0.525);
font-size: 0.857em;
margin-right: 5px;
}
}
#media only screen and (max-width: 768px) {
span {
display: block;
width: 100%;
margin-bottom: 8px;
}
}
}
/* ----------------------------------------------------------------------
Material Design Raised Buttons - by Ravikumar Chauhan
------------------------------------------------------------------------- */
.rkmdTert-btn {
display: inline-block;
position: relative;
cursor: pointer;
height: 40px;
padding: 0 16px 0 16px;
line-height: 35px;
color: #00B455;
font-size: 14px;
font-weight: bold !important;
font-family: arial;
letter-spacing: .8px;
text-align: center;
text-decoration: none;
vertical-align: middle;
white-space: nowrap;
outline: none;
border: none;
user-select: none;
border-radius: 2px;
transition: all .3s ease-out;
&:hover { }
}
.rkmd-btn {
border: 1px solid $Nutrien-green;
display: inline-block;
position: relative;
cursor: pointer;
height: 40px;
padding: 0 16px 0 16px;
line-height: 35px;
color: #00B455;
font-size: 14px;
font-weight: bold !important;
font-family: arial;
letter-spacing: .8px;
text-align: center;
text-decoration: none;
vertical-align: middle;
white-space: nowrap;
outline: none;
user-select: none;
border-radius: 2px;
transition: all .3s ease-out;
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.225);
&:hover { text-decoration: none; box-shadow: 0 4px 10px 0px rgba(0,0,0,0.225); border: 1px solid $Nutrien-greenSecondary--hover; }
}
.rkmdgrey-btn {
display: inline-block;
position: relative;
cursor: pointer;
height: 40px;
padding: 0 16px 0 16px;
line-height: 35px;
color: #A1A1A1;
background-color: #DFDFDF;
font-size: 14px;
font-weight: bold !important;
font-family: arial;
letter-spacing: .8px;
text-align: center;
text-decoration: none;
vertical-align: middle;
white-space: nowrap;
outline: none;
border: none;
user-select: none;
border-radius: 2px;
transition: all .3s ease-out;
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.225);
&:hover { text-decoration: none; box-shadow: 0 4px 10px 0px rgba(0,0,0,0.225); }
}
.rkmdWhite-btn {
border: 1px solid #00B455;
display: inline-block;
position: relative;
cursor: pointer;
height: 40px;
padding: 0 16px 0 16px;
line-height: 35px;
color: #00B455;
font-size: 14px;
font-weight: bold !important;
font-family: Arial;
letter-spacing: .8px;
text-align: center;
text-decoration: none;
vertical-align: middle;
white-space: nowrap;
outline: none;
user-select: none;
border-radius: 2px;
transition: all .3s ease-out;
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.225);
&:hover { text-decoration: none; box-shadow: 0 4px 10px 0px rgba(0,0,0,0.225); background: $Nutrien-green--hover; color: white;
border: 1px solid $Nutrien-greenSecondary--hover;}
}
.rkmdYellow-btn {
border: 1px solid $Nutrien-yellow;
background-color: #F9E051;
display: inline-block;
position: relative;
cursor: pointer;
height: 40px;
padding: 2px 16px 0 16px;
line-height: 35px;
color: black;
font-size: 14px;
font-weight: bold !important;
font-family: Arial;
letter-spacing: .8px;
text-align: center;
text-decoration: none;
vertical-align: middle;
white-space: nowrap;
outline: none;
user-select: none;
border-radius: 2px;
transition: all .3s ease-out;
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.225);
&:hover { text-decoration: none; box-shadow: 0 4px 10px 0px rgba(0,0,0,0.225); background-color: #E9CE1A; border: 1px solid $Nutrien-yellow--hover;}
}
/* ----------------------------------------------------------------------
Material Design Fab Buttons - by Ravikumar Chauhan
------------------------------------------------------------------------- */
.rkmd-btn {
&.btn-fab,
&.btn-fab-mini {
overflow: hidden;
position: relative;
margin: auto;
padding: 0;
line-height: normal;
border-radius: 50%;
box-shadow: 0 2px 5px 1px rgba(0,0,0,0.3);
&:hover { box-shadow: 0 4px 11px 0px rgba(0,0,0,0.375); }
i {
display: inline-block;
float: none;
width: inherit;
margin: 0;
font-size: inherit;
text-align: center;
line-height: none;
vertical-align: middle;
}
}
&.btn-fab {
width: 56px;
height: 56px;
font-size: 28px;
}
&.btn-fab-mini {
width: 40px;
height: 40px;
font-size: 24px;
}
}
/* Buttons Color */
.rkmd-btn {
&.btn-lightBlue {
color: #FFF;
background-color: $btn_lightBlue;
&:hover { background-color: lighten($btn_lightBlue, 8%); }
}
&.btn-white {
color: #444;
background-color: $btn_white;
&:hover { background-color: darken($btn_white, 2%); }
}
&.btn-black {
color: #bdbdbd;
background-color: $btn_black;
&:hover { background-color: lighten($btn_black, 8%); }
}
&.btn-grey {
color: #757575;
background-color: $btn_grey;
&:hover { background-color: darken($btn_grey, 4%); }
}
&.btn-orange {
color: #FFF;
background-color: $btn_orange;
&:hover { background-color: lighten($btn_orange, 8%); }
}
&.btn-amber {
color: #FFF;
background-color: $btn_amber;
&:hover { background-color: lighten($btn_amber, 8%); }
}
&.btn-green {
color: #FFF;
background-color: $btn_green;
&:hover { background-color: lighten($btn_green, 8%); }
}
&.btn-teal {
color: #FFF;
background-color: $btn_teal;
&:hover { background-color: lighten($btn_teal, 8%); }
}
&.btn-cyan {
color: #FFF;
background-color: $btn_cyan;
&:hover { background-color: lighten($btn_cyan, 8%); }
}
&.btn-indigo {
color: #FFF;
background-color: $btn_indigo;
&:hover { background-color: lighten($btn_indigo, 8%); }
}
&.btn-deepPurple {
color: #FFF;
background-color: $btn_deepPurple;
&:hover { background-color: lighten($btn_deepPurple, 8%); }
}
&.btn-pink {
color: #FFF;
background-color: $btn_pink;
&:hover { background-color: lighten($btn_pink, 8%); }
}
&.btn-red {
color: #FFF;
background-color: $btn_red;
&:hover { background-color: lighten($btn_red, 8%); }
}
&.btn-yellow {
color: #FFF;
background-color: $btn_yellow;
&:hover { background-color: darken($btn_yellow, 13%); }
}
&.btn-lime {
color: #FFF;
background-color: $btn_lime;
&:hover { background-color: darken($btn_lime, 8%); }
}
&.btn-brown {
color: #FFF;
background-color: $btn_brown;
&:hover { background-color: lighten($btn_brown, 8%); }
}
}
/* Raised Buttons Size (Not work in Fab Buttons) */
.rkmd-btn {
&.btn-lg {
height: 48px;
line-height: 48px;
}
&.btn-sm {
height: 30px;
padding: 0 1rem;
line-height: 30px;
font-size: 12px;
}
&.btn-xs {
height: 24px;
padding: 0 .4rem;
line-height: 24px;
font-size: 11px;
font-weight: 300;
letter-spacing: .2px;
}
}
/* Raised Buttons Types */
.rkmd-btn {
&.disabled, &[disabled] {
cursor: default !important;
color: #9e9e9e !important;
box-shadow: none !important;
}
&.disabled:not(.btn-flat), &[disabled]:not(.btn-flat) {
background-color: #cdcdcd !important;
&:hover { background-color: #cdcdcd !important; }
}
&.btn-flat {
box-shadow: none !important;
background-color: transparent !important;
&:hover { background-color: #cecece !important; box-shadow: none !important; }
&.disabled:hover,
&[disabled]:hover { background-color: transparent !important; }
}
&.btn-link {
color: #3949ab !important;
box-shadow: none !important;
background-color: transparent !important;
&:hover {
text-decoration: underline !important;
background-color: transparent !important;
box-shadow: none !important;
}
&.disabled,
&[disabled] {
color: #9fa8da !important;
text-decoration: underline !important;
background-color: transparent !important;
}
&.disabled:hover,
&[disabled]:hover { background-color: transparent !important; }
}
i {
float: left;
width: auto;
height: auto;
margin-right: 10px;
font-size: 1.3rem;
line-height: inherit;
&.right {
float: right !important;
margin: 0;
margin-left: 10px;
}
}
}
/* ----------------------------------------------------------------------
Material Design Ripple Effect - by Ravikumar Chauhan
------------------------------------------------------------------------- */
.ripple-effect {
display: inline-block;
position: relative;
overflow: hidden;
cursor: pointer;
vertical-align: middle;
user-select: none;
z-index: 1;
.ripple {
display: block;
position: absolute;
border-radius: 100%;
background: rgba(255,255,255,0.5);
transform: scale(0);
pointer-events: none;
}
&.ripple-dark {
.ripple {
background: rgba(0,0,0,0.1) !important;
}
}
&.ripple-red {
.ripple {
background: rgba(244,67,54,0.725) !important;
}
}
&.ripple-orange {
.ripple {
background: rgba(255,152,0,0.725) !important;
}
}
&.ripple-yellow {
.ripple {
background: rgba(255,235,59,0.725) !important;
}
}
&.ripple-green {
.ripple {
background: rgba(221,104,100,0.725) !important;
}
}
&.ripple-purple {
.ripple {
background: rgba(156,39,176,0.725) !important;
}
}
&.ripple-teal {
.ripple {
background: rgba(0,150,136,0.725) !important;
}
}
&.ripple-pink {
.ripple {
background: rgba(233,30,99,0.725) !important;
}
}
.animated {
animation: ripple 0.6s linear;
}
#include keyframes('ripple') {
100% {
opacity: 0;
transform: scale(2.5);
}
}
}
$(document).ready(function() {
$('.ripple-effect').rkmd_rippleEffect();
});
(function($) {
$.fn.rkmd_rippleEffect = function() {
var btn, self, ripple, size, rippleX, rippleY, eWidth, eHeight;
btn = $(this).not('[disabled], .disabled');
btn.on('mousedown', function(e) {
self = $(this);
// Disable right click
if(e.button === 2) {
return false;
}
if(self.find('.ripple').length === 0) {
self.prepend('<span class="ripple"></span>');
}
ripple = self.find('.ripple');
ripple.removeClass('animated');
eWidth = self.outerWidth();
eHeight = self.outerHeight();
size = Math.max(eWidth, eHeight);
ripple.css({'width': size, 'height': size});
rippleX = parseInt(e.pageX - self.offset().left) - (size / 2);
rippleY = parseInt(e.pageY - self.offset().top) - (size / 2);
ripple.css({ 'top': rippleY +'px', 'left': rippleX +'px' }).addClass('animated');
setTimeout(function() {
ripple.remove();
}, 800);
});
};
}(jQuery));