How to apply hover effects on buttons using CSS SASS
CSS How to Apply Hover Effects to Buttons with SASS
SASS, short for Syntactically Awesome Stylesheet, is a CSS preprocessor, meaning people can generate from their own SASS code. Using SASS instead of just writing CSS has its own advantages, such as more readable code and an easy-to-learn syntax, which makes it easier and more efficient to style HTML elements in a web application.
In this article, we’ll style a button element with the help of SASS. First, we’ll write a section of SASS code to apply hover styles to the button. Then, we’ll generate the corresponding CSS file with the help of the “sass” compiler. We can then include the generated CSS file in our HTML file and use the styles to style the button element.
Example
In this example, we will change the background and font color of a button element on hover with the help of SASS.
First, create an HTML file with a basic page layout.
File name: index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>How to apply custom Color to glyphicon icon embed within a link styled with Bootstrap?</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<h1>Button hover effect using SASS!</h1>
<button class="button">Click me!</button>
</body>
</html>
Now, create a SASS file to style the button.
File name: index.scss
.button {
&:hover {
background-color: black;
color: white;
}
}
Now, generate its corresponding CSS file with the help of the “sass” compiler. Please use the following command to install it –
npm install sass -g
or
yarn add sass -g
The above command will generate the corresponding CSS file, which can then be imported into your HTML file to include the button styles.
The CSS file that gets created would be like this −
Filename: index.css
.button:hover {
background-color: black;
color: white;
}
/*# sourceMappingURL=index.css.map */
Summary
In this article, we learned about SASS and used it to apply hover effects to HTML button elements. We first wrote the SASS code and compiled it into CSS. Finally, we added the generated CSS code to the HTML file to apply the hover effect to the button.