CSS Border Transition Effects

CSS Border Transition Effects

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 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

☞ The Web Developer Bootcamp

☞ 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

☞ Animating SVG with CSS

☞ The CSS Handbook: a handy guide to CSS for developers

☞ 11 Amazing CSS You Shouldn’t Miss


Originally published on https://webdevtrick.com

Angular 9 Tutorial: Learn to Build a CRUD Angular App Quickly

What's new in Bootstrap 5 and when Bootstrap 5 release date?

What’s new in HTML6

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

The Ultimate Guide to Web Development with HTML and CSS

The Ultimate Guide to Web Development with HTML and CSS

The Ultimate Guide to Web Development with HTML and CSS. Learn Web Development by creating a Blog with HTML and CSS. Make a web applications using HTML5 and CSS3. Create a blog from Scratch.

The Ultimate Guide to Web Development with HTML and CSS

The Ultimate Guide to Web Development with HTML and CSS. Learn Web Development by creating a Blog with HTML and CSS. Make a web applications using HTML5 and CSS3. Create a blog from Scratch.

If you want to create your own website or want to become a web developer, you are in the right place. This course, you are going to learn about html language which is the most important skill you must know in web developer career.

In addition, html is used to create website skeleton, to make them look nice, you must apply CSS style to them. With the latest technology, you will be able to make a web-page layout and structure according to what you want or what your client want.

Honestly, There are many courses available on the internet include free and fee. how ever, most of them are really hard to follow along. That is the reason that I create this web development course on Udemy which is easier to understand. Do you want to spend a month to learn or just spend less time but get the concept and have ability to develop a website? When you know its concept, you will no longer need any teacher. I mean you can learn and research more by yourself.

What you'll learn

  • Make a web applications using HTML5 and CSS3
  • Create a blog from stretch
  • Understand and have skill how website work
  • Be a comfortable front-end developer

Introduction To HTML & CSS: Web Development For Beginners

Introduction To HTML & CSS: Web Development For Beginners

Introduction To HTML & CSS: Web Development For Beginners - Complete HTML & CSS web developer bootcamp. Learn & practice website design using HTML5 & CSS3 web development resources

Welcome to Introduction To HTML & CSS: Web Development For Beginners: This is a comprehensive and Practical guide that is designed to pick up every interested student from the state of "zero-knowledge" to a state of "Hero-knowledge" in HTML and CSS. As a senior software developer and an instructor with many years of experience in the industry, I have mastered the best way to give my students packages that will help them to learn and understand HTML and CSS in one course.

What you'll learn

  • You will learn the basics of web development
  • You will be able to use the HTML tags professionally
  • You will learn how to work with images in HTML and CSS
  • You will learn how to create awesome backgrounds
  • You will how to use CSS colors
  • You will master most web development documentations used by professionals
  • You will learn how to embed multimedia in web pages
  • You will learn how to make comments in both HTML and CSS
  • You will learn the Box Model

How to Create an Animated Navbar with Html, CSS and JavaScript

How to Create an Animated Navbar with Html, CSS and JavaScript

In this Html, CSS and JavaScript tutorial you will build an animated navbar with Html, CSS and JavaScript. Have you every wanted to create an awesome animated navbar with JavaScript? We will be looking at making a navbar with Html and CSS and then using the intersection observer in JavaScript to help us create this effect.

Javascript Animated Navbar Tutorial

Have you every wanted to create an awesome animated navbar with javascript? no? oh well...this is akward.

All jokes aside we will be looking at making a navbar with html and css and then using the intersection observer in javascript to help us create this effect.