CSS Border Transition Effects
I am sure that you know about the border, Previously I have shared different types of border outline styles. These all effect are about changing border style on mouseover. There is some example of multiple direction animation fills on the border. All animations are the basic CSS command-based stuff.
Today you will learn to create some kinds of border hover animation using HTML and CSS. In other words, we will create some hover animationthat affects the borders of elements. If you are a beginner no problem, you will understand very easily the codes. There are only 2 main commands controls all the effects.
So, Today I am sharing CSS Border Transition Effects On Hover. There are effects available like normal draw, draw meet, spin, circle spin, etc. Maybe this is a kind of button hover effect, but it works for the change border style. In this post I am sharing 5 types of animation effect, you can create more by understanding the concept.
If you are thinking now how these effects actually are, then see the preview given below.
Preview Of Border Hover Animation
See this video preview to getting an idea of how the border animation looks like.
Now you can see this visually, Also you can see it live by pressing the button given above. If you like this, then get the source code of its.
You May Also Like:
- Animated Login Page In HTML
- Sidebar Menu Reveal
- Toggle Switch With Checkbox
- CSS 3D Image Gallery
CSS Border Transition Effects On Hover Source Code
Before sharing source code, let’s talk about it. First, I have created five buttons and put inside the main div. All divs have a different class for giving multiple effects. For example: For the simple line draw effect I have placed <button class="draw">Draw</button> .
Now in the CSS file, I placed all the elements on the right place. For creating the hover effect I have used CSS transition and border-* properties. Border-* properties like border-top, border-left, border-top-color, etc. Also used transform (info) property for rotate and 3D translate.
There are lots of basic CSS codes, I can’t explain all in writing. You will understand easily after getting the codes. For creating this program you have to create only 2 files, one for HTML and one for CSS. Follow the steps to creating this without any error.
index.html
Create an HTML file named ‘index.html‘ and put these codes given here below.
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>CSS Border Transitions | Webdevtrick.com</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Border Transitions Effects</h1> <section class="container"> <button class="draw">Draw</button> <button class="draw meet">Draw Meet</button> <button class="center">Center</button> <button class="spin">Spin Box</button> <button class="spin circle">Spin Circle</button> </section> </body> </html>
style.css
Now create a CSS file named ‘style.css‘ and put these codes given here.
body {
background: #fefefe;
font: 300 24px/1.5 Lato, sans-serif;
margin: 1em auto;
max-width: 36em;
padding: 1em 1em 2em;
text-align: center;
}
h1 {
font-weight: 300;
font-size: 2.5em;
}
.container {
isolation: isolate;
}
button {
background: none;
border: 0;
box-sizing: border-box;
margin: 1em;
padding: 1em 2em;
box-shadow: inset 0 0 0 2px #f45e61;
color: #f45e61;
font-size: inherit;
font-weight: 700;
position: relative;
vertical-align: middle;
}
button::before, button::after {
box-sizing: inherit;
content: '';
position: absolute;
width: 100%;
height: 100%;
}
.draw {
transition: color 0.25s;
}
.draw::before, .draw::after {
border: 2px solid transparent;
width: 0;
height: 0;
}
.draw::before {
top: 0;
left: 0;
}
.draw::after {
bottom: 0;
right: 0;
}
.draw:hover {
color: #0eb7da;
}
.draw:hover::before, .draw:hover::after {
width: 100%;
height: 100%;
}
.draw:hover::before {
border-top-color: #0eb7da;
border-right-color: #0eb7da;
transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
}
.draw:hover::after {
border-bottom-color: #0eb7da;
border-left-color: #0eb7da;
transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
}
.meet:hover {
color: #0eb7da;
}
.meet::after {
top: 0;
left: 0;
}
.meet:hover::before {
border-top-color: #0eb7da;
border-right-color: #0eb7da;
}
.meet:hover::after {
border-bottom-color: #0eb7da;
border-left-color: #0eb7da;
transition: height 0.25s ease-out, width 0.25s ease-out 0.25s;
}
.center:hover {
color: #0eb7da;
}
.center::before, .center::after {
top: 0;
left: 0;
height: 100%;
width: 100%;
transform-origin: center;
}
.center::before {
border-top: 2px solid #0eb7da;
border-bottom: 2px solid #0eb7da;
transform: scale3d(0, 1, 1);
}
.center::after {
border-left: 2px solid #0eb7da;
border-right: 2px solid #0eb7da;
transform: scale3d(1, 0, 1);
}
.center:hover::before, .center:hover::after {
transform: scale3d(1, 1, 1);
transition: transform 0.5s;
}
.spin {
width: 5em;
height: 5em;
padding: 0;
}
.spin:hover {
color: #0eb7da;
}
.spin::before, .spin::after {
top: 0;
left: 0;
}
.spin::before {
border: 2px solid transparent;
}
.spin:hover::before {
border-top-color: #0eb7da;
border-right-color: #0eb7da;
border-bottom-color: #0eb7da;
transition: border-top-color 0.15s linear, border-right-color 0.15s linear 0.1s, border-bottom-color 0.15s linear 0.2s;
}
.spin::after {
border: 0 solid transparent;
}
.spin:hover::after {
border-top: 2px solid #0eb7da;
border-left-width: 2px;
border-right-width: 2px;
transform: rotate(270deg);
transition: transform 0.4s linear 0s, border-left-width 0s linear 0.35s;
}
.circle {
border-radius: 100%;
box-shadow: none;
}
.circle::before, .circle::after {
border-radius: 100%;
}
That’s It. Now you have successfully created CSS Border Transition Effects On Hover, Border Hover Animation.
Thanks for reading. If you liked this post, share it with all of your programming buddies!
Further reading
☞ Build Responsive Real World Websites with HTML5 and CSS3
☞ Advanced CSS and Sass: Flexbox, Grid, Animations and More!
☞ Web Design for Beginners: Real World Coding in HTML & CSS
☞ Foundation CSS Framework - Crash Course for Beginners
☞ The CSS Handbook: a handy guide to CSS for developers
☞ 11 Amazing CSS You Shouldn’t Miss
Originally published on https://webdevtrick.com
#css #html #javascript #web-development
