How we can create different types of transition on the element’s border using CSS? Solution: CSS Border Transition Effects On Hover, Border Style Change On Hover.
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 animation that 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:
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 |
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. If you have any doubt or question comment down below.
Thanks For Visiting, Keep Visiting.
nice border Effects On Hover. Too many options for me 😉
it is possible to get the same effect with border-radius 30px?
😉