Techniques
Ink Ripple Touch Feedback
Concentric circle expanding from touch/click point with primary-color fill at low opacity — the signature Material 1 interaction pattern.
.ripple-container {
position: relative;
overflow: hidden;
}
.ripple-container::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(33, 150, 243, 0.25);
transform: translate(-50%, -50%);
transition: width 0.4s cubic-bezier(0, 0, 0.2, 1),
height 0.4s cubic-bezier(0, 0, 0.2, 1),
opacity 0.4s ease-out;
opacity: 0;
}
.ripple-container:active::after {
width: 300px;
height: 300px;
opacity: 1;
}
Elevation Lift on Hover
Cards and buttons increase their elevation shadow on hover/focus, creating a "picking up" effect that reinforces the paper metaphor.
.material-card {
background: #FFFFFF;
border-radius: 2px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
transition: box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1),
transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.material-card:hover {
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
transform: translateY(-2px);
}
Underline Input Focus Transition
Material 1 text inputs use a bottom-border-only style. On focus, a primary-colored line scales from center outward — a distinctive animation that avoids the "box input" pattern entirely.
.material-input {
border: none;
border-bottom: 1px solid #9E9E9E;
background: transparent;
padding: 8px 0;
font-size: 16px;
color: #212121;
outline: none;
position: relative;
}
.material-input-wrapper::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 2px;
background: #2196F3;
transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1),
left 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.material-input:focus ~ .material-input-wrapper::after,
.material-input-wrapper:focus-within::after {
width: 100%;
left: 0;
}