Adrian TwarogThis video will show you 4 different ways you can perform a CSS background transition on a clickable element. CSS transitions are useful, especially because often mobile and tablet devices no longer have a clickable title or button eg. readme. Instead, the whole element is clickable.
Being able to have nice CSS hover effects allows users on desktop to know the elements are clickable. There are many different ways you can approach this using CSS and transitions.
We will take a look at:
- Background color changes
- Using transition
- Using special CSS elements like :before
- Applying different transitions effects like:
- Using absolute values to have a top-down transition
- Using border-radius to create a circular transition
- Using border-width to create angled transition
Background Transition 1
Just changing the background with a smooth transition
.v1 {
transition: 0.25s ease background;
&:hover {
background:#e1e1e1;
}
}
Background Transition 2
Sliding the overlay from the top to the bottom
.v2 {
position: relative;
overflow: hidden;
h2,.img,p {
position: relative;
}
&:before {
content:"";
display: block;
position: absolute;
top:0;
left:0;right:0;
bottom:100%;
background:#e1e1e1;
transition: 0.25s ease bottom;
}
&:hover {
&:before {
bottom:0%;
}
}
}
Background Transition 3
Creating a circle that expands from the middle
.v3 {
position: relative;
overflow: hidden;
h2,.img,p {
position: relative;
}
&:before {
content:"";
display: block;
position: absolute;
top:50%;
left:50%;
border-radius:50%;
width:0%;
padding-top:0%;
transform: translate(-50%,-50%);
background:#e1e1e1;
transition: 0.5s ease padding-top, 0.5s ease width;
}
&:hover {
&:before {
width:150%;
padding-top:150%;
}
}
}
Background Transition 4
Creating an angle that comes from the top right to the bottom left
.v4 {
position: relative;
overflow: hidden;
h2,.img,p {
position: relative;
}
&:before {
content:"";
display: block;
position: absolute;
top:0;
left:0;
width:0px;
height:0px;
border-style:solid;
border-width:0px 0px 0 0;
border-color:#e1e1e1 transparent transparent transparent;
transition: 0.5s ease border-width;
}
&:hover {
&:before {
border-width:800px 800px 0 0;
}
}
}
Want to see more:
I will try to post new great content every day. Here are the latest items:
