Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to apply the hover effect over the button using SASS?
We can apply the hover effect over the button using SASS with the help of the :hover CSS selector.SASS stands for Syntactically Awesome Stylesheet and is a CSS pre-processor, which implies one can generate CSS from its respective SASS code. Using SASS instead of just writing CSS comes with its own set of advantages, like more readable code and easy-to-learn code syntax, and one can leverage these to style the HTML elements, more easily and efficiently, in a web application.
In this article, we will give styling to a button element with the help of SASS. First, we will write a SASS code to give a set of styling to the button on hover. Then, we will generate its corresponding CSS file with the help of the “sass” compiler. After that, we can include the generated CSS file in our HTML file and use the styling from it to style the button element.
Example
In this example, we will change the background and font color of the button element on hover with the help of SASS.
First, create an HTML file with the basic page layout.
Filename: 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 write the styling for the button.
Filename: index.scss
.button {
&:hover {
background-color: black;
color: white;
}
}
Now, generate its corresponding CSS file with the help of “sass” compiler. Please install it using the below command −
npm install sass -g
OR
yarn add sass -g
The above command will generate the corresponding CSS file, and this file can then be imported in your HTML file to include the styling for the button.
The CSS file that gets created would be like this −
Filename: index.css
.button:hover {
background-color: black;
color: white;
}
/*# sourceMappingURL=index.css.map */
Conclusion
In this article, we learned what SASS is, and we used it to apply the hover effect over the HTML button element. We first wrote our SASS code and compiled it into our CSS code. We finally included our generated CSS code into our HTML file to apply the hover effect over button,
5K+ Views
