Connect to HandCash - Button
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
Updated 6 months ago