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
CSS Articles
Page 92 of 130
Fade in on Button hover with CSS
CSS fade-in effects on button hover create smooth visual transitions that enhance user interaction. This effect gradually increases a button's opacity from a lower value to full opacity when the user hovers over it. Syntax selector { opacity: initial-value; transition: duration; } selector:hover { opacity: final-value; } Example: Basic Fade-in on Hover The following example creates a button that fades in from 50% to full opacity on hover − ...
Read MoreSet the width of a button with CSS
The CSS width property is used to set the width of a button. By default, buttons size themselves based on their content, but you can control their width using CSS to create consistent button layouts. Syntax button { width: value; } Possible Values ValueDescription autoDefault value - button width adjusts to content lengthSets width using px, em, rem, etc. %Sets width as percentage of parent container max-contentWidth based on content size Example: Fixed Width Button The following example sets a button width to 150px with styling ...
Read MoreAdd a pressed effect on button click with CSS
Adding a pressed effect on button click with CSS makes the user feel more interactive with the web page. It provides an immediate visual effect indicating that the button press has been registered, helping to improve the user experience. In this article, we have a button on our web page. Our task is to add a pressing effect while clicking the button using different CSS techniques. Syntax button:active { transform: transformFunction(value); } Approaches to Add a Pressed Effect on Button Here are three approaches to add a pressed effect ...
Read MoreUsage of CSS grid-row-gap property
The CSS grid-row-gap property is used to set the gap (space) between grid rows in a CSS Grid container. This property allows you to control the vertical spacing between grid items, making your layout more visually appealing and easier to read. Syntax selector { grid-row-gap: length; } Possible Values ValueDescription lengthDefines the gap size using units like px, em, rem, %, etc. 0Default value with no gap between rows Example The following example demonstrates how to create a grid layout with a 20px gap between rows ...
Read MoreCreate a Bordered Button Group with CSS
The CSS border property allows you to create visually appealing button groups with defined borders around each button. This technique is useful for creating navigation menus, toolbars, or any grouped interactive elements. Syntax .button-group { /* Container styles */ } .button-group button { border: width style color; /* Additional button styles */ } Example: Basic Bordered Button Group The following example creates a horizontal button group with blue borders − .btn-group ...
Read MoreSet the speed of the hover effect with CSS
To set the speed of the hover effect with CSS, we can control how quickly style changes occur when users hover over elements. This is achieved using two main approaches: CSS transition properties and CSS animation properties. Syntax /* Using transition */ selector { transition-duration: time; } /* Using animation */ selector:hover { animation-duration: time; } Method 1: Using transition-duration Property The transition-duration property sets how long a transition takes to complete. This creates smooth changes between normal and hover states − ...
Read MoreCreate Hoverable Buttons with CSS
The CSS :hover pseudo-selector is used to apply styles to an element when a user hovers their mouse over it. This creates interactive hoverable buttons that change appearance on mouse hover. Syntax selector:hover { property: value; } Example: Basic Hoverable Button The following example creates a hoverable button that changes color and border style when hovered − .btn { background-color: yellow; color: black; ...
Read MoreHow to add a colored border to a button with CSS?
The CSS border property is used to add a colored border to HTML elements, including buttons. You can customize the border's width, style, and color to create various visual effects. Syntax selector { border: width style color; } Possible Values PropertyValuesDescription widthpx, em, rem, thin, medium, thickSets the border thickness stylesolid, dashed, dotted, double, grooveDefines the border style colorcolor names, hex, rgb, hslSets the border color Example: Dashed Blue Border The following example creates a button with a 3px dashed blue border − ...
Read MoreRole of CSS flex-wrap property no-wrap value
The CSS flex-wrap property with nowrap value prevents flex items from wrapping to new lines, keeping all items on a single row even if they overflow the container. Syntax selector { flex-wrap: nowrap; } Example The following example demonstrates how nowrap forces all flex items to stay on one line − .mycontainer { display: flex; background-color: orange; ...
Read MoreChange the padding of a button with CSS
The CSS padding property allows you to control the space between a button's content (text or icon) and its borders. This spacing is crucial for creating visually appealing and user-friendly buttons that are easy to click. Syntax button { padding: value; } Possible Values ValueDescription lengthDefines padding in px, em, rem, etc. %Percentage of the containing element's width top right bottom leftFour values for each side individually vertical horizontalTwo values for vertical and horizontal padding Example 1: Different Padding Values The following example shows buttons with ...
Read More