html – Required aid styling switch

I require some aid brushing the designing of this span-button which is given by the web site I utilize. I do not assume I can alter the switch kind to one more kind, as well as given that im utilizing Squarespace to include the switch to the website, the entire code requires to be in HTML.

The code for the switch is given, as well as a web link to just how I desire the switch to look. Im anticipating your individuals’ suggestions as well as means to do it!

Ive attempted to design it utilizing various means, yet can not appear to comprehend just how to precisely execute the css right into the span-element.

This is the given code for the switch:

<< period course=" glf-button" data-glf-cuid=" 44e34391-d2c4-489d-90d7-22b985839fe4" data-glf-ruid=" 8c4c9138-a45f-41bb-8e6b-042c85a98586" > > Se Meny & & Bestill .
<< manuscript src=" https://www.fbgcdn.com/embedder/js/ewm2.js" delay async ><> .

Below you can locate the wanted designing of the switch: https://codepen.io/romeg33/pen/mrdGMe

<< div course=" block-center">
<> < switch course=" btn" function=" switch"><> < period>> Hover as well as click!< .
<.

 @import 'https://fonts.googleapis.com/css?family=Roboto:300';.

body {
history: #F 5F5F5;
}
. block-center {
placement: outright;
top: 50%;
left: 50%;
change: equate( -50%, -50%);.
}

$ btn-color: # 03A9F4;.
$ line-color: # 0288D1;.
$ txt-color: #fff;.
$ btn-font-family: 'Roboto', sans-serif;.
$ btn-font-size: 24px;.

$ transition-in: size.2 s cubic-bezier( 0.770, 0.000, 0.175, 1.000), elevation.2 s. 2s cubic-bezier( 0.770, 0.000, 0.175, 1.000), border-color.4 s;.
$ transition-out: size.4 s cubic-bezier( 0.770, 0.000, 0.175, 1.000), elevation.2 s. fours cubic-bezier( 0.770, 0.000, 0.175, 1.000);

. btn {
placement: family member;.
extra padding: 15px 20px;.
background-color: $btn-color;.
boundary: none;.
text-decoration: none;.
shade: $txt-color;.
font-family: $btn-font-family;.
font-size: $btn-font-size;.
letter-spacing: 1px;.
z-index: 1;.
arrow: guideline;.
synopsis: none;.

& & period {
placement: family member;.
z-index: 2;.
}

&&: prior to {
web content:";.
placement: outright;.
box-sizing: border-box;.
border-bottom: 4px strong clear;.
left: 0;.
base: 0;.
size: 0;.
elevation: 4px;.
background-color: $line-color;.
shift: $transition-out;.
}

&&: float {

&&: prior to {
size: 100%;.
elevation: 100%;.
shift: $transition-in;.
}
}

&&: energetic {
&&: prior to {
border-bottom: 4px strong $btn-color;.
}
}
}