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:wght@500&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