"back to top" button with white outline

Dear all, my website is https://www.ssi.com.hk/, there is a "back to top" button, and the code is 

/* Back to Top */
.t-top {
  font-weight: 300;
    letter-spacing: 3px;
    font-size: 15px;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.6;
    padding-left: 2px;
    padding-top: 4px;
    position: fixed;
    right: 30px;
    bottom: 30px;
    width: 40px;
    height: 40px;
    z-index: 999;
    background-color: transparent;
    color: #000;
}
.t-top .arrow:before {
      font-family: 'squarespace-ui-font';
    font-style: normal;
    font-weight: 300;
    font-size: 20px;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    content: "\e02d";
    text-align: center;
    display: block;
    vertical-align: middle;
    transform: rotate(-90deg);
    cursor: pointer;
    margin-left: -4px;
}
.t-top .arrow {display:inline;}
footer#footer-sections {
    z-index: 1000;
}

may i ask that, how could i make the "back to top" button which are arrow and the font, have the white color outline, thus people can use the "back to top" button in black background.

Thank you so much.