JSFiddle - React, Tailwind, and code Playground

by CodeMaverick

HTML

<input type="button" name="btn1" value="Button 1" />
<button name="btn2" id="btn2">Button 2</button>
<input type="submit" name="btnSubmit" value="Submit" />

CSS

button,
input[type=button],
input[type=submit] {

    margin: 10px;
    height: 50px;
    width: 100px;
    background: lightyellow;
    color: green;
    font-weight: bold;
    border: solid 2px black;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    -moz-box-shadow: 2px 2px 4px #888;
    -webkit-box-shadow: 2px 2px 4px #888;
    box-shadow: 2px 2px 4px #888;
    cursor: pointer;
    
}

JavaScript

jQuery.expr[':'].regex = function(elem, index, match) {
    var matchParams = match[3].split(','),
        validLabels = /^(data|css):/,
        attr = {
            method: matchParams[0].match(validLabels) ? 
                        matchParams[0].split(':')[0] : 'attr',
            property: matchParams.shift().replace(validLabels,'')
        },
        regexFlags = 'ig',
        regex = new RegExp(matchParams.join('').replace(/^\s+|\s+$/g,''), regexFlags);
    return regex.test(jQuery(elem)[attr.method](attr.property));
}

$(':regex(name,^btn)').hover(function(){

    $(this).css({"background" : "green", "color" : "lightyellow" });


}, function() {

    $(this).css({"background" : "lightyellow", "color" : "green" });

});