Connect to HandCash

Appearance

Use the code below to create an HTML with the HandCash branding. You may attach your redirect_url to this button.

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <div id="connectButton" url="https://app.handcash.io/#/authorizeApp?appId=<your-app-id>">Connect with HandCash</div>
    <script type="text/javascript" src="js/connect_button.js"></script>
</body>

const connectButton = document.getElementById('connectButton');
const url = connectButton.getAttribute('url');

function connectWithHandCash() {
    location.href = url;
}

console.log(connectButton);

connectButton.addEventListener('click', connectWithHandCash, false);

@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Poppins:[email protected]&display=swap');
#connectButton{
    -webkit-user-select: none; /* Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+/Edge */
    user-select: none; /* Standard */
    font-family: 'Poppins', sans-serif;
    box-shadow: 0px 1px 3px hsla(0, 0%, 0%, .15);
    background-image: linear-gradient(#38CB7C, #1CB462);
    border-radius: 8px;
    display:inline-block;
    text-align: center;
    cursor:pointer;
    color:#ffffff;
    font-size:16px;
    font-weight:500;
    padding:16px 24px;
    text-decoration:none;
    transition: 0.3s;
    width: 100%;
    max-width: 320px;
    vertical-align: middle;
    letter-spacing: 0.5px;
}
#connectButton:before {
    background: url("https://handcash.io/assets/ic_stat_handcash_notification.png") no-repeat scroll center center / 100% auto rgba(0, 0, 0, 0);
    content: "";
    display: inline-block;
    color: #fff;
    height: 20px;
    margin-right: 12px;
    margin-bottom: 1px;
    position: relative;
    vertical-align: middle;
    width: 20px;
}
#connectButton:hover {
    background-image: linear-gradient(#31C475, #16B15D);
    top:1px;
    box-shadow: 0px 3px 6px hsla(0, 0%, 0%, .15);
}
#connectButton:active {
    background-image: linear-gradient(#38CB7C, #1CB462);
    position:relative;
    top:1px;
    box-shadow: 0px 0px 0px hsla(0, 0%, 0%, .15);
}

The button will look like this:

Connect with HandCash