Assets

Overview

While integrating Connect into your app, you may want to take advantage of some assets such as colors, buttons, or images.

When prompting your users to login with Connect, you can use the following button:

Connect with HandCash

To add this button into your app, use the following html, js, and css:

<head>
	<meta charset="utf-8">
	<link rel="stylesheet" href="css/styles.css">
</head>
<body>
	<div id="connectButton" app-id="123-456">Connect with HandCash</div>
	<script type="text/javascript" src="js/connect_button.js"></script>
</body>

const connectButton = document.getElementById('connectButton');
const appId = connectButton.getAttribute('app-id');

function connectWithHandCash() {
    location.href = 'https://app.handcash.io?appId=' + appId;
}

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/resources/handcash_white_icon.svg) 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);
}