How to call different CSS class into HTML Code?

Question

I want to create a button for my web page, and so I have created another button css class because the css code was really long and my original class was already long enough. For the sake of organization purposes, I created a button.css which holds the CSS for my button. So, I would like to know how I can call that CSS class into my HTML code, since this is not the original style.css class I am working with.

My button.css class code:

@import url('https://fonts.googleapis.com/css?family=Mukta:700');

$bg: #f3f8fa;
$white: #fff;
$black: #282936;

@mixin transition($property: all, $duration: 0.45s, $ease: cubic-bezier(0.65,0,.076,1)) {
  transition: $property $duration $ease;
}

* {
  box-sizing: border-box;
  &::before, &::after {
    box-sizing: border-box;
  }
}

body {
  font-family: 'Mukta', sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  min-height: 100vh;
  background: $bg;
}

button {
  position: relative;
  display: inline-block;
  cursor: pointer;
  outline: none;
  border: 0;
  vertical-align: middle;
  text-decoration: none;
  background: transparent;
  padding: 0;
  font-size: inherit;
  font-family: inherit;
  &.learn-more {
    width: 12rem;
    height: auto;
    .circle {
      @include transition(all, 0.45s, cubic-bezier(0.65,0,.076,1));
      position: relative;
      display: block;
      margin: 0;
      width: 3rem;
      height: 3rem;
      background: $black;
      border-radius: 1.625rem;
      .icon {
        @include transition(all, 0.45s, cubic-bezier(0.65,0,.076,1));
        position: absolute;
        top: 0;
        bottom: 0;
        margin: auto;
        background: $white;
        &.arrow {
          @include transition(all, 0.45s, cubic-bezier(0.65,0,.076,1));
          left: 0.625rem;
          width: 1.125rem;
          height: 0.125rem;
          background: none;
          &::before {
            position: absolute;
            content: '';
            top: -0.25rem;
            right: 0.0625rem;
            width: 0.625rem;
            height: 0.625rem;
            border-top: 0.125rem solid #fff;
            border-right: 0.125rem solid #fff;
            transform: rotate(45deg);
          }
        }
      }
    }
    .button-text {
      @include transition(all, 0.45s, cubic-bezier(0.65,0,.076,1));
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      padding: 0.75rem 0;
      margin: 0 0 0 1.85rem;
      color: $black;
      font-weight: 700;
      line-height: 1.6;
      text-align: center;
      text-transform: uppercase;
    }
  }
  &:hover {
    .circle {
      width: 100%;
      .icon {
        &.arrow {
        background: $white;
        transform: translate(1rem, 0);
        }
      }
    }
    .button-text {
      color: $white;
    }
  }
}

@supports (display: grid) {
  body {
    display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 0.625rem;
  grid-template-areas: ". main main ." ". main main .";
  }
  
  #container {
    grid-area: main;
    align-self: center;
    justify-self: center;
  }
}

HTML Code:

<div id="container">
  <button class="learn-more">
    <span class="circle" aria-hidden="true">
      <span class="icon arrow"></span>
    </span>
    <span class="button-text">Learn More</span>
  </button>
</div>

This however does not work for me because I need a way to call the code from the button.css class and I do not know how to.

Where I used the whole code from originally: https://codepen.io/kathykato/pen/rZRaNe

This question is a bit unclear. The `button.css` you provided looks like SASS and not CSS. What do you mean _So, I would like to know how I can call that CSS class into my HTML code, since this is not the original style.css class I am working with._? — disinfor, Jan 04 '21 at 21:09
The HTML code provided above does not work for some reason, is there a certain file the whole code above should be in? I got it off the link i pasted above, so I do not know where to put the code at or how to execute it. — , Jan 04 '21 at 21:14
Does this answer your question? [Attaching a Sass/SCSS to HTML docs](https://stackoverflow.com/questions/19215517/attaching-a-sass-scss-to-html-docs) — Louys Patrice Bessette, Jan 04 '21 at 21:31
@User234 I think you have a few problems here. What you copied is SASS. You need to get the compiled CSS. On the codepen link, click the arrow dropdown in the CSS box and select "View Compiled CSS". For _HTML code provided above does not work for some reason_ - what do you mean "doesn't work"? Where are you putting the HTML? — disinfor, Jan 04 '21 at 23:11

score 0 · Answer 1 · answered Jan 04 '21 at 21:47

anyway you can compile your code through the codepen CSS drop-down-menu arrow to get such CSS.... otherwise u can use java script compiler like less javascript as per Louys link

@import url("https://fonts.googleapis.com/css?family=Mukta:700");
* {
  box-sizing: border-box;
}
*::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: "Mukta", sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  min-height: 100vh;
  background: #f3f8fa;
}

button {
  position: relative;
  display: inline-block;
  cursor: pointer;
  outline: none;
  border: 0;
  vertical-align: middle;
  text-decoration: none;
  background: transparent;
  padding: 0;
  font-size: inherit;
  font-family: inherit;
}
button.learn-more {
  width: 12rem;
  height: auto;
}
button.learn-more .circle {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: relative;
  display: block;
  margin: 0;
  width: 3rem;
  height: 3rem;
  background: #282936;
  border-radius: 1.625rem;
}
button.learn-more .circle .icon {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  background: #fff;
}
button.learn-more .circle .icon.arrow {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  left: 0.625rem;
  width: 1.125rem;
  height: 0.125rem;
  background: none;
}
button.learn-more .circle .icon.arrow::before {
  position: absolute;
  content: "";
  top: -0.25rem;
  right: 0.0625rem;
  width: 0.625rem;
  height: 0.625rem;
  border-top: 0.125rem solid #fff;
  border-right: 0.125rem solid #fff;
  transform: rotate(45deg);
}
button.learn-more .button-text {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.75rem 0;
  margin: 0 0 0 1.85rem;
  color: #282936;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
  text-transform: uppercase;
}
button:hover .circle {
  width: 100%;
}
button:hover .circle .icon.arrow {
  background: #fff;
  transform: translate(1rem, 0);
}
button:hover .button-text {
  color: #fff;
}

@supports (display: grid) {
  body {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 0.625rem;
    grid-template-areas: ". main main ." ". main main .";
  }

  #container {
    grid-area: main;
    align-self: center;
    justify-self: center;
  }
}

Alright thanks, but I now copied and pasted it into the button.css file, and I need the html code to execute the code properly. Are there any changes/edits that need to be made to my html code above? — , Jan 04 '21 at 22:20
first of all please mark the answer as right if it what exactly you want, to let people know that you got your answer, and this CSS style have a body section which could override your main page style, so you have to check it out before including it into your page, and about adding the CSS style to your page you have 2 choices, by adding it to your page through the head 1) **internal** : between`` tags or 2) **external** : by putting it in a separated file.css and call it using `` , goodluck anyway — Burham B. Soliman, Jan 04 '21 at 23:01
@User234 here is a [reference from w3schools](https://www.w3schools.com/html/html_css.asp) to learn more about HTML CSS styles — Burham B. Soliman, Jan 04 '21 at 23:03

How to call different CSS class into HTML Code?

1 Answers1