Soda Cane With Border Hover Animation

Description:-

Hey Codex, today in this blog you’ll learn "How to create a ''Soda Cane With Border Hover Animation - Using HTML & CSS".

Let's see!

First, try it by following the video tutorial !

This tutorial video can help you to Create a Soda Cane With Border Hover Anima- Using HTML & CSS.

You might also like this :-

• Social Share Button - Using HTML CSS

• Login Page - Using HTML CSS

• Neumorphism hover effect on Card

• Add To Favorites Button Hover Effect

• Profile card hover effect

Source code:-

All the source codes are available to download from here. Copy and paste the code from the text editors. First, try it by following the video tutorial. It will help you to understand all of it. After that, if you have got something wrong with your code use the given source codes to compare with yours. It will help you to understand all of it and your mistakes.

HTML

Create a file with the name of index.html and paste the HTML code in it.

CSS

Now create a file with the name of style.css and paste the CSS code in it.

@import url('https://fonts.googleapis.com/css?family=Knewave|Raleway:500');

body {
  margin: 0;
  padding: 0;
  background-color: #fce0df;
}

.main {
  width: 500px;
  height: 300px;
  box-sizing: border-box;
  padding: 3em;
  position: absolute;
  top: 53%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.main::before,
.main::after {
  content: "";
  width: 0;
  height: 0;
  box-sizing: inherit;
  margin-top: 30px;
  margin-bottom: -30px;
  border: 3px solid transparent;
  position: absolute;
}

.main::before {
  top: 0;
  left: 0;
}

.main::after {
  bottom: 0;
  right: 0;
  z-index: 999;
}

.main:hover::before,
.main:hover::after {
  width: 100%;
  height: 100%;
}

.main:hover::before {
  border-top-color: #F25978;
  border-right-color: #F25978;
  transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
}

.main:hover::after {
  border-bottom-color: #F7ACA9;
  border-left-color: #F7ACA9;
  transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
}

.product__image {
  position: absolute;
  top: 50%;
  left: 25%;
  transform: translate(-50%, -50%);
  z-index: 99;
}

.container {
  width: 120%;
  height: 200px;
  margin-top: 20px;
}

.title {
  font-family: 'Knewave', cursive;
    font-size: 35px;
    color:#F25978;
    margin-bottom: 50px;
    position: relative;
    top:0;
    left: 0;
    transition: all 1s;
    z-index: 9;
}
.title > span{
    font-size: 18px;
    display:block;
    color: #f47a93;
}
.desc{
    width: 160px;
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    color:#404040;
    left:0;
    bottom: 2rem;
    line-height: 1.8;
    position: relative;
    transition: all 1s;
}
.main:hover .container .title,
.main:hover .container .desc{
    left:40%;
}