Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
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. We will write SASS code to apply hover effects, compile it to CSS, and demonstrate how the nested syntax makes the code more maintainable.
Syntax
.button {
&:hover {
property: value;
}
}
Installation Requirements
Before starting, you need to install SASS compiler using one of the following commands:
npm install -g sassORyarn global add sassTo compile SASS to CSS, run:
sass input.scss output.css
Example: Button Hover Effect with Color Change
In this example, we will change the background and font color of the button element on hover with the help of SASS
SASS file (styles.scss):
.button {
background-color: #3498db;
color: white;
padding: 12px 24px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
transition: all 0.3s ease;
&:hover {
background-color: #2c3e50;
color: #ecf0f1;
transform: translateY(-2px);
}
}
Complete HTML file with compiled CSS:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Button Hover Effect using SASS</title>
<style>
.button {
background-color: #3498db;
color: white;
padding: 12px 24px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
transition: all 0.3s ease;
}
.button:hover {
background-color: #2c3e50;
color: #ecf0f1;
transform: translateY(-2px);
}
body {
font-family: Arial, sans-serif;
padding: 50px;
text-align: center;
}
</style>
</head>
<body>
<h1>Button Hover Effect using SASS!</h1>
<button class="button">Hover Over Me!</button>
</body>
</html>
A blue button with white text appears on the page. When hovered, the button changes to dark gray color, slightly lifts up (translateY), and shows a smooth transition effect.
Generated CSS Output
When the SASS code is compiled, it generates the following CSS
.button {
background-color: #3498db;
color: white;
padding: 12px 24px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
transition: all 0.3s ease;
}
.button:hover {
background-color: #2c3e50;
color: #ecf0f1;
transform: translateY(-2px);
}
Conclusion
SASS makes it easier to write hover effects using nested syntax with the & symbol. The &:hover syntax is more readable and maintainable compared to writing separate CSS selectors, especially for complex components with multiple states.
8K+ Views
