Hover Effects and Click Interactions in W3.CSS
Hover effects and click interactions in W3.CSS web development scripts are powerful tools for improving the default, boring user interactivity and visual appearance of user-developed webpages. Hover effects allow web developers to add smooth transitions, animations, and enhanced visual interface feedback when internet users interact with action-triggered buttons, web links, or block elements like div on a webpage or website that have hover effects.
The W3.CSS webpage formatting script provides web developers with multiple utility classes that allow web developers to easily apply these effects to their desired webpage elements without writing custom CSS source code. Below, we’ll describe several common hover effects and click interactions that W3.CSS web developers can apply to various web object elements as needed.
Hover Effect Concepts in W3.CSS.
Hover effects on a website are triggered or executed when a web user moves their mouse pointer over a created hover element, such as a webpage button, image, or link. W3.CSS provides web developers with a variety of hover classes that allow them to modify or update default style attributes on the hover element object, including the opacity, color, and shadow effect attributes of the hover element object defined in the webpage.
Common hover effects used in W3.CSS.
- w3-hover-opacity – Modifies the opacity of an existing webpage element when hovering over it.
- w3-hover-shadow – Adds a shadow effect to an existing webpage element when hovering over it.
- w3-hover-shadow-small – Adds a small shadow effect when hovering over an existing webpage element.
- w3-hover-shadow-medium – Adds a medium shadow effect when hovering over an existing webpage element.
- w3-hover-shadow-large – Adds a large shadow effect when hovering over an existing webpage element.
- w3-hover-color – Modifies the background color of an existing webpage element when hovering over it.
- w3-hover-text-color – Modifies the color of the webpage element text when hovering over it.
Example of multiple hover effects in W3.CSS.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Let’s Explore Hover Effects Attributes in W3.CSS</title>
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”>
</head>
<body>
<div class=”w3-container”>
<h2>Let’s Try Some Hover Effects with W3.CSS</h2>
<!– Here we add a hover effect with opacity –>
<button class=”w3-button w3-indigo w3-hover-opacity”>
Move Mouse Pointer to Hover
</button>
<br><br>
<!– Here we add a hover effect with shadow –>
<button class=”w3-button w3-aqua w3-hover-shadow”>
Move Mouse Over to See Shadow Effect
</button>
<br><br>
<!– Here we add a hover effect with background color change –>
<button class=”w3-button w3-red w3-hover-teal”>
Move Mouse Pointer to Change Background Color
</button>
<br><br>
<!– Here we add a hover effect with text color change –>
<button class=”w3-button w3-yellow w3-hover-text-red”>
Move Mouse Pointer to Change Text Color
</button>
</div>
</body>
</html>
Explanation of W3.CSS hover effects.
- w3-hover-opacity – Here in this example, when hovering over a webpage element, the opacity of the current button is reduced. This makes the button semi-transparent.
- w3-hover-shadow-large – This effect displays a large shadow effect around a webpage button when hovered over. This makes the button appear slightly raised on the webpage.
- w3-hover-color – This effect changes the background color of a webpage button when hovered over.
- w3-hover-text-color – This effect modifies the text color of a webpage button when hovered over.
Click interaction attributes concept in W3.CSS.
Click interactions in W3.CSS web development scripts typically provide feedback when a web user manually clicks or taps a webpage element. In W3.CSS designed webpages, web developers can use the w3-active, w3-clickable, and w3-disabled W3.CSS classes to manage click and interaction effect attributes on buttons.
Here is some common webpage elements click interaction classes.
- w3-active – This clicks interaction effect highlights an element object in the current webpage when it is clicked. These are often used for buttons, links, or navigation items defined in webpages.
- w3-clickable – This effect determines the current webpage’s clickability. This class is typically used with text links or div blocks that behave like buttons.
- w3-disabled – This effect disables a web element in the current webpage, making it unclickable or deactivated, and displays that the button is defined as inactive in the current page.
Example of the click interaction attribute in a W3.CSS class.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Let’s Explore Click Interactions Attributes in W3.CSS</title>
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”>
</head>
<body>
<div class=”w3-container”>
<h2>Here We Try Click Interactions in W3.CSS Classes</h2>
<!– Here we add a button with an active state class –>
<button class=”w3-button w3-red w3-active”>
Click Button
</button>
<br><br>
<!– Here we add a clickable-looking div element with W3.CSS –>
<div class=”w3-button w3-pink”>
Clickable Div Block
</div>
<br><br>
<!– Here we add a disabled button –>
<button class=”w3-button w3-grey w3-disabled” disabled>
W3.CSS Disabled Button
</button>
</div>
</body>
</html>
Explanation of the click interaction attribute in a W3.CSS class.
- w3-active – This class applies a click interaction effect to the button, making it active (usually by changing its background or border) or highlighting it.
- w3-clickable – This class applies a click interaction effect to the div element, making it behave like a clickable button. This doesn’t style the button element in the webpage as a button, but instead adds the click class interaction behavior to it, making it interactive within the current webpage.
- w3-disabled – This makes the defined button unclickable or deactivated within the current webpage, and disables its default look. By default, it’s gray.
