Creating a Button Concept with HTML, SCSS, and CoffeeScript

 Creating a Button Concept with HTML, SCSS, and CoffeeScript

Introduction:

In this tutorial, we will learn how to create a stylish button concept using HTML, SCSS (Sassy CSS), and CoffeeScript. The button will have an interactive animation, indicating success when clicked. We'll walk you through the code step by step, explaining each component and the rationale behind it.

Prerequisites: To follow along with this tutorial, you should have a basic understanding of HTML, CSS, SCSS, and CoffeeScript. Additionally, ensure you have the FontAwesome library installed to utilize the icons.

HTML Markup: Let's start with the HTML code. We have a simple anchor tag with the class "button" and a "role" attribute set to "button". Inside the anchor tag, we have a text span element for displaying the button text, and a div with the class "icon" containing two Font Awesome icons - one for removing and the other for indicating success.

   <a class="button" href="#" role="button">
  <span>remove</span>
  <div class="icon">
    <i class="fa fa-remove"></i>
    <i class="fa fa-check"></i>
  </div>
</a>  
  

SCSS Styling: Next, let's dive into the SCSS (Sassy CSS) code. We start by defining some variables for colors and transition speed. Then, we apply various styles to the button and its elements to achieve the desired look and animation.

    /* Reset */
@import url(//codepen.io/chrisdothtml/pen/ojLzJK.css);

// Variables
$color: #c0392b;
$color-dark: #a53125;
$speed: "0.25s";
$transition: all #{$speed} cubic-bezier(0.310, -0.105, 0.430, 1.400);

/* Main Styles */
.button {
  // Add styles for the button itself, such as dimensions, color, and positioning.

  span,
  .icon {
    // Style the text span and icon container.

    span {
      // Customize the appearance of the button text and its animation.
    }

    .icon {
      // Style the icon container.

      .fa {
        // Apply styles to the Font Awesome icons.
      }

      .fa-remove {
        // Specific styling for the remove icon.
      }

      .fa-check {
        // Specific styling for the check icon.
      }
    }
  }

  &.success,
  &:hover {
    // Define the styles for the success animation and the hover state of the button.

    span {
      // Customize the animation for the text span.
    }

    .icon {
      // Apply styles when the success animation or hover state is triggered.

      .fa {
        // Adjust the Font Awesome icon size.
      }
    }
  }

  &.success {
    // Specific styles for the button when the success animation is active.
  }

  &:hover {
    // Styles applied on button hover.
  }

  &:active {
    // Styles applied on button click.
  }
}

  

CoffeeScript: Finally, let's take a look at the CoffeeScript code. Here, we define a function named removeSuccess that removes the "success" class from the button. We use jQuery to handle the button click event and apply the "success" class to the button when clicked. After 3000 milliseconds (3 seconds), the removeSuccess function is called to remove the "success" class, ending the success animation.

  
    removeSuccess = ->
  $('.button').removeClass 'success'

$(document).ready ->
  $('.button').click ->
    $(@).addClass 'success'
    setTimeout removeSuccess, 3000

  

Conclusion: By combining HTML, SCSS, and CoffeeScript, we've created an impressive button concept with an animated success indication. You can further customize this button by adjusting the styles and colors to suit your project's theme. Feel free to explore and expand on this concept to enhance your web design projects. Happy coding!