Assets

Overview

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



Login

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);
}

You may also download the complete zip here: Download



Colors

Below is a collection of our brand colors, please feel free to use these as you see fit:


Primary Color

#38CB7C



Images

Below is a collection of image assets, you may use these anywhere you’d like:

image image image image
image image image image