Button Ripple Effect - CSS Typing CST Test
Loading…
Button Ripple Effect — CSS Code
Creates a ripple effect on button click using pseudo-elements and transitions.
.ripple-button {
position: relative;
overflow: hidden;
padding: 1rem 2rem;
border: none;
border-radius: 8px;
background: #007bff;
color: white;
cursor: pointer;
}
.ripple-button::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: rgba(255,255,255,0.3);
top: 0;
left: 0;
transform: scale(0);
border-radius: 50%;
transition: transform 0.5s, opacity 1s;
}
.ripple-button:active::after {
transform: scale(2);
opacity: 0;
transition: 0s;
}CSS Language Guide
CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of HTML documents. It controls layout, colors, fonts, spacing, and visual effects, separating content structure from design.
Primary Use Cases
- ▸Styling web pages and HTML elements
- ▸Responsive design for multiple screen sizes
- ▸Creating layouts using Flexbox and Grid
- ▸Applying animations and transitions
- ▸Theme management and branding for websites
Notable Features
- ▸Selectors and combinators to target elements
- ▸Box model controlling margins, borders, padding, and content
- ▸Media queries for responsive design
- ▸Pseudo-classes and pseudo-elements for advanced styling
- ▸Support for transitions, animations, and transformations
Origin & Creator
Developed by Håkon Wium Lie in 1994 while working with Tim Berners-Lee at CERN.
Industrial Note
CSS is specialized for visual presentation and layout rather than content creation or logic processing.