Blockonomics allows you to easily edit the appearance of your payment buttons, to let you add that personal touch to your payment process. Customize the payment button appearance to match the look of your website.



1) Add your CSS below the Payment Button JavaScript tag

<!-- Payment Button JS -->
<script src="https://www.blockonomics.co/js/pay_button.js"></script>
<!-- Your Custom CSS -->
<style type="text/css">
    /* Your Custom CSS Here 
    See examples below */
</style>



2) Create your custom CSS styling for the payment button as desired. Some examples can be found below.


Change background color:

#blockoPayModal.modal .modal-content {
    background: #131a22;
}



Change font:

#blockoPayModal.modal {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}



Change title color:

#blockoPayModal.modal .modal-header h4 {
    color: #fff;
}



Change description color:

#blockoPayModal.modal .modal-header .modal-desc {
    color: #fff;
}



Change button color and hover color:

#blockoPayModal.modal .btn-warning {
    background-color: #428bca;
    border-color: #428bca;
}
#blockoPayModal.modal .btn-warning:hover {
    background-color: #254563;
    border-color: #254563;
}


Hide Powered by Blockonomics:

#blockoPayModal.modal .modal-footer small {
    display: none;
}



Increase the height of the inputs (email, amount and address)

#blockoPayModal.modal .form-control {
    height: 44px;
}



Change the color of the progress bar

#blockoPayModal.modal .ticker .time-progress .prog {
    background: #428bca;
}



Change the color of the BTC amount

#blockoPayModal.modal .ticker .time-progress .prog {
    background: #428bca;
}