I need some help combing the styling of this span-button which is provided by the website I use. I don't think I can change the button type to another type, and since im using Squarespace to add the button to the site, the whole code needs to be in HTML.

The code for the button is provided, and a link to how I want the button to look. Im looking forward to your guys' ideas and ways to do it!

Ive tried to style it using different ways, but can't seem to understand how to exactly implement the css into the span-element.

This is the provided code for the button:

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

Here you can find the desired styling of the button: https://codepen.io/romeg33/pen/mrdGMe

<div >
  <button  role="button"><span>Hover and click!</span></button>
</div>

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

body {
  background: #F5F5F5;
}
.block-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

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

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

.btn {
  position: relative;
  padding: 15px 20px;
  background-color: $btn-color;
  border: none;
  text-decoration: none;
  color: $txt-color;
  font-family: $btn-font-family;
  font-size: $btn-font-size;
  letter-spacing: 1px;
  z-index: 1;
  cursor: pointer;
  outline: none;
  
  & span {
    position: relative;
    z-index: 2;
  }
  
  &:before {
    content: '';
    position: absolute;
    box-sizing: border-box;
    border-bottom: 4px solid transparent;
    left: 0;
    bottom: 0;
    width: 0;
    height: 4px;
    background-color: $line-color;
    transition: $transition-out;
  }
  
  &:hover {
    
    &:before {
      width: 100%;
      height: 100%;
      transition: $transition-in;
    }
  }
  
  &:active {
    &:before {
      border-bottom: 4px solid $btn-color;
    }
  }
}

CodePudding user response：

A couple of things to point out. In the codepen example they're targeting the button with the class 'btn' but your span has the class 'glf-button'. That's why the styles aren't binding.

The styling is also written in SCSS, not normal CSS. Here is the styling with the correct class and converted to vanilla CSS.

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

 .glf-button {
     position: relative;
     padding: 15px 20px;
     background-color: #03a9f4;
     border: none;
     text-decoration: none;
     color: #fff;
     font-family: 'Roboto', sans-serif;
     font-size: 24px;
     letter-spacing: 1px;
     z-index: 1;
     cursor: pointer;
     outline: none;
}
 .glf-button span {
     position: relative;
     z-index: 2;
}
 .glf-button:before {
     content: '';
     position: absolute;
     box-sizing: border-box;
     border-bottom: 4px solid transparent;
     left: 0;
     bottom: 0;
     width: 0;
     height: 4px;
     background-color: #0288d1;
     transition: width 0.4s cubic-bezier(0.77, 0, 0.175, 1), height 0.2s 0.4s cubic-bezier(0.77, 0, 0.175, 1);
}
 .glf-button:hover:before {
     width: 100%;
     height: 100%;
     transition: width 0.2s cubic-bezier(0.77, 0, 0.175, 1), height 0.2s 0.2s cubic-bezier(0.77, 0, 0.175, 1), border-color 0.4s;
}
 .glf-button:active:before {
     border-bottom: 4px solid #03a9f4;
}

CodePudding user response：

i think you need this codepen output purely in html and css . try like below,

@import 'https://fonts.googleapis.com/css?family=Roboto:300';
 body {
     background: #f5f5f5;
}
 .block-center {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
}
 .btn {
     position: relative;
     padding: 15px 20px;
     background-color: #03a9f4;
     border: none;
     text-decoration: none;
     color: #fff;
     font-family: 'Roboto', sans-serif;
     font-size: 24px;
     letter-spacing: 1px;
     z-index: 1;
     cursor: pointer;
     outline: none;
}
 .btn span {
     position: relative;
     z-index: 2;
}
 .btn:before {
     content: '';
     position: absolute;
     box-sizing: border-box;
     border-bottom: 4px solid transparent;
     left: 0;
     bottom: 0;
     width: 0;
     height: 4px;
     background-color: #0288d1;
     transition: width 0.4s cubic-bezier(0.77, 0, 0.175, 1), height 0.2s 0.4s cubic-bezier(0.77, 0, 0.175, 1);
}
 .btn:hover:before {
     width: 100%;
     height: 100%;
     transition: width 0.2s cubic-bezier(0.77, 0, 0.175, 1), height 0.2s 0.2s cubic-bezier(0.77, 0, 0.175, 1), border-color 0.4s;
}
 .btn:active:before {
     border-bottom: 4px solid #03a9f4;
}

<div >
  <button  role="button"><span>Hover and click!</span></button>
</div>

please comment if any query