JSFiddle - React, Tailwind, and code Playground

by mojtaba

HTML

<div class="divD"><input type="button" id="x" name="button" value="Search"   onclick="showUser()" class="button"/></div>
    <input type="image" name="button" value="Search" onclick="showUser()" class="button"/>
    <input type="submit" name="button" value="Search" onclick="showUser()" class="button"/>

CSS

#x
        {
            width: 100%;
            height: 100%;
            -webkit-border-radius: 19px;
            -moz-border-radius: 19px;
            border-radius: 19px;
            background-color: #424242;
            -webkit-box-shadow: 0 2px 2px rgba(0,0,0,.75), inset 0 1px 2px rgba(255,255,255,.75);
            -moz-box-shadow: 0 2px 2px rgba(0,0,0,.75), inset 0 1px 2px rgba(255,255,255,.75);
            box-shadow: 0 2px 2px rgba(0,0,0,.75), inset 0 1px 2px rgba(255,255,255,.75);
            background-image: -webkit-linear-gradient(bottom, #454b54, #2b323b 50%, #363e46 51%, #6d7278);
            background-image: -moz-linear-gradient(bottom, #454b54, #2b323b 50%, #363e46 51%, #6d7278);
            background-image: -o-linear-gradient(bottom, #454b54, #2b323b 50%, #363e46 51%, #6d7278);
            background-image: -ms-linear-gradient(bottom, #454b54, #2b323b 50%, #363e46 51%, #6d7278);
            background-image: linear-gradient(to top, #454b54, #2b323b 50%, #363e46 51%, #6d7278);
            background-size: 100% 100%;

        }

        .divD {
            width: 500px;
            height: 500px;
        }

JavaScript

$(function(){
        var xxx ="http://placekitten.com/150/150";
            $("#x").click(function(){
                $('#x').css({'background-image':' url('+xxx+')','cursor':'pointer','border':' none'});
            });
    });