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
Articles by AmitDiwan
Page 508 of 840
How to animate buttons using CSS?
To animate buttons on a web page, CSS provides several techniques including the transition property for smooth state changes and pseudo-selectors like :hover and :active to create interactive effects. Button animations enhance user experience by providing visual feedback when users interact with elements. Syntax button { transition: property duration timing-function; } button:hover { /* Animation styles */ } button:active { /* Click state styles */ } Method 1: Hover Animation The following example creates a button with a smooth color ...
Read MoreHow to create a split button dropdown with CSS?
A split button dropdown combines a primary action button with a secondary dropdown arrow button. This creates two clickable areas within the same button component - the main button for the primary action and the arrow for accessing additional options. Syntax .split-button { display: inline-flex; } .dropdown:hover .dropdown-content { display: block; } Creating the Button Structure First, create the HTML structure with two buttons side by side − .split-button { ...
Read MoreHow to style outline buttons with CSS?
Outline buttons are styled with borders and transparent backgrounds. The button text matches the border color, creating a clean, minimalist appearance. When hovered, these buttons typically fill with color for better user feedback. Syntax button { border: 2px solid color; background-color: transparent; color: border-color; } button:hover { background-color: fill-color; color: white; } Basic Outline Button Structure Outline buttons use the element with specific CSS classes for different button types − Success ...
Read MoreHow to create a responsive portfolio gallery grid with CSS?
If you are a shutterbug and love photography, you would love to display it on a website for sure. For that, grids are created for the gallery that also works on different devices. The responsiveness can also be set easily using CSS Grid or Flexbox. Syntax .gallery-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; } Method 1: Using CSS Grid CSS Grid provides an efficient way to create responsive gallery layouts. The auto-fit and minmax() functions automatically adjust the number ...
Read MoreHow to add a border to an image with CSS?
To add a border to an image, use the border property and set it to the element. This is the shorthand property to set the border style, width, color, etc. The border style can be solid, double, dotted, etc. Syntax img { border: width style color; } Basic Border Example The following example adds a solid border to an image − img { ...
Read MoreHow to create a thumbnail image CSS?
A thumbnail image in CSS is a small, clickable preview of a larger image that typically opens the full-size version when clicked. Thumbnails are commonly used in galleries, portfolios, and product listings to save space while providing visual previews. Syntax img { width: value; height: value; border: width style color; border-radius: value; } img:hover { box-shadow: values; transform: scale(value); } Example: Basic Thumbnail with Hover Effect The following example ...
Read MoreHow to create a responsive image with CSS?
Responsive images automatically scale with the screen size, ensuring optimal display across all devices. The key CSS properties for creating responsive images are width, max-width, and height. Syntax img { max-width: 100%; height: auto; } Method 1: Using max-width Property The most common approach uses max-width: 100% to ensure the image never exceeds its container width − .responsive-img { max-width: 100%; ...
Read MoreHow to create an avatar image with CSS?
The avatar image on a website is a profile image visible under the author's profile. Also visible under the team's page where details of all the team members are visible on a company's website. Let us see how to create an avatar image with HTML and CSS. Syntax .avatar { border-radius: 50%; width: value; height: value; } Method 1: Basic Circular Avatar The images are placed just like any other image using the element. A class is set for both images ...
Read MoreHow to align images side by side with CSS?
To align images side by side, we can use the float property in CSS. With that, flex also allows us to align images. Let us understand them one by one with examples beginning with aligning images side by side with the float property. Syntax /* Using Float */ .image-container { float: left; width: value; } /* Using Flexbox */ .container { display: flex; justify-content: value; } Method 1: Align Images Side by Side With Float We can ...
Read MoreHow to create a blurry background image with CSS?
A blurry background image creates an elegant overlay effect where content can be displayed over a softened background. This technique is commonly used for hero sections, modal overlays, and content cards to improve readability while maintaining visual appeal. Syntax selector { background-image: url("image-path"); filter: blur(value); background-size: cover; background-position: center; } Method 1: Basic Blurred Background The following example creates a blurred background image using the CSS filter property with the blur() function − ...
Read More