CSS Border Transition Effects On Hover | Border Hover Animation

. CSS Border Transition Effects

In this tutorial, we learn how to create different types of CSS Border transition effects on hover using CSS? CSS border Animation on hover.

the previous post I have shared CSS border properties, I know you will be aware of the border, therefore in this program, all effect is changing border style on mouseover. all Border transition Effects created with the help of pure CSS means basic CSS command.

Therefore, in this blog you will learn to create Border Effects On Hover using HTML and pure CSS, I hope you will understand the Hover animation, if you don’t know, let’s me explain, hover animation, when your mouseover on element then which effect occurs on the present style of elements that hovers animation.

so, this tutorial hovers animation that affects the borders of elements. therefore, in this blog, some effects are used such as Spin Circle, Spin Thick, Spin Box, Center, Draw, Draw Meet.etc.

maybe this is a kind of button hovers effect, but this effect works for the change border style. I have shared six types of border effects, you can create more effect after understanding the concept of border animation on hover effects.

Explanation of Source Code for CSS Border Transition Effects On Hover | Border Hover Animation using CSS

let’s discuss the source code, First I have created the six-button such as circle, thick, spin, center, draw, meet. and put these button inside the main div.

therefore In this program, All divs have a different class for giving multiple effects on hover. such as:-

<button class="spin circle">Spin Circle</button>
<button class="spin thick">Spin Thick</button>
<button class="spin">Spin Box</button>
<button class="center">Center</button>
<button class="draw">Draw</button>
<button class="draw meet">Draw Meet</button>

<button class="spin circle">Spin Circle</button>

<button class="spin thick">Spin Thick</button>

<button class="center">Center</button>

In the stylesheet, I placed all the elements class, button, elements in the right place. therefore, for creating CSS Border Transition Effects I have used CSS border properties like Border-top, border-bottom, border-left, border-right, border-top-color, bottom, border-right-color, border-left-color, border-bottom-color, etc.

The transform (info) properties for rotate and 3D translate. and also used CSS transition property like as:-

transform: scale3d(1, 1, 1);
transition: transform 0.5s;
transition: color 0.25s;
transform-origin: center;

transform: scale3d(1, 1, 1);

transition: transform 0.5s;

transition: color 0.25s;

transform-origin: center;

so, I hope you can understand the Simple CSS source code which I have used for Creating CSS border-transition effects, and when you get the code you will understand in a more better way.

therefore, For Creating this program I have used only Two files like the first file for HTML and second file CSS. I hope you will enjoy this program.

First File: Create HTML File as the name “index.html” | Change Filename as you want

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CSS Border Transitions</title>
  <link rel="stylesheet" href="css/stylesheet.css">
</head>
<body>
<h1>CSS Border Transition Effects On Hover</h1>
 
<section class="container">
  <button class="spin circle">Spin Circle</button>
  <button class="spin thick">Spin Thick</button>
  <button class="spin">Spin Box</button>
  <button class="center">Center</button>
  <button class="draw">Draw</button>
  <button class="draw meet">Draw Meet</button>
</section>
  
</body>
</html>

<!DOCTYPE html>

<head>

<title>CSS Border Transitions</title>

</head>

<body>

<h1>CSS Border Transition Effects On Hover</h1>

<button class="spin circle">Spin Circle</button>

<button class="spin thick">Spin Thick</button>

<button class="center">Center</button>

</section>

</body>

</html>

Second Step: Create CSS file as name “stylesheet.css” | change name as you want

body {
  background: #fefefe;
  text-align: center;
  margin: 1em auto;
  max-width: 52em;
  padding: 1em 1em 2em;
  font: 700 sans-serif; 
}

.spin {
 padding: 0;
 width: 8em;
 height: 8em;
}
.spin:hover {
  color: #716969;
}
.spin::before, .spin::after {
  left: 0;
  top: 0;
}
.spin::before {
  border: 2px solid transparent;
}
.spin:hover::before {
  border-top-color: #fc1a02;
  border-bottom-color: #fc1a02;
  border-right-color: #fc1a02;
  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 {
  transform: rotate(270deg);
  border-top: 2px solid #fc1a02;
  border-right-width: 2px;
  border-left-width: 2px;
  transition: transform 0.4s linear 0s, border-left-width 0s linear 0.35s;
}
.circle {
  box-shadow: none;
  border-radius: 100%;
}
.circle::before, .circle::after {
  border-radius: 100%;
}
.thick {
  color: #716969;}

 .thick :hover {
    color: #fff;
    font-weight: 700;
  }

  .thick::before {
    border: 2.5em solid transparent;
    z-index: -1;
  }

  .thick::after {
    mix-blend-mode: color-dodge;
    z-index: -1;
  }

  .thick:hover::before {
    background: #fc1a02;
    border-bottom-color: #fc1a02;
    border-top-color: #fc1a02;
    border-right-color: #fc1a02;
    transition:
      background 0s linear 0.4s,
      border-right-color 0.15s linear 0.15s,
      border-bottom-color 0.15s linear 0.25s;
      border-top-color 0.15s linear,
      
  }

  .thick:hover::after {
    border-top: 2.5em solid red;
    border-left-width: 2.5em;
    border-right-width: 2.5em;
  }
  .center:hover {
  color: #fc1a02;
}
.center::before, .center::after {
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  transform-origin: center;
}
.center::before {
  border-top: 2px solid #fc1a02;
  border-bottom: 2px solid #fc1a02;
  transform: scale3d(0, 1, 1);
}
.center::after {
  border-left: 2px solid #fc1a02;
  border-right: 2px solid #fc1a02;
  transform: scale3d(1, 0, 1);
}
.center:hover::before, .center:hover::after {
  transform: scale3d(1, 1, 1);
  transition: transform 0.5s;
}

.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: #fc1a02;
}
.draw:hover::before, .draw:hover::after {
  width: 100%;
  height: 100%;
}
.draw:hover::before {
  border-top-color: #fc1a02;
  border-right-color: #fc1a02;
  transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
}
.draw:hover::after {
  border-bottom-color: #fc1a02;
  border-left-color: #fc1a02;
  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: #fc1a02;
}
.meet::after {
  top: 0;
  left: 0;
}
.meet:hover::before {
  border-top-color: #fc1a02;
  border-right-color: #fc1a02;
}
.meet:hover::after {
  border-bottom-color: #fc1a02;
  border-left-color: #fc1a02;
  transition: height 0.25s ease-out, width 0.25s ease-out 0.25s;
}

/*styling css*/
h1 {
  
  font-size: 44px;
  font-weight: 700;
}
.container {
  isolation: isolate;
}
button {
  background: none;
  color: #716969;
  font-size: inherit;
  font-weight: 700;
  position: relative;
  border: 0;
  box-sizing: border-box;
  margin: 1em;
  padding: 2em 2em;
  box-shadow: inset 0 0 0 2px #55dc0f;
  vertical-align: middle;
}
button::before, button::after {
  width: 100%;
  height: 100%;
  content: '';
  position: absolute;
  box-sizing: inherit;
}

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

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

body {

background: #fefefe;

text-align: center;

margin: 1em auto;

max-width: 52em;

padding: 1em 1em 2em;

font: 700 sans-serif;

}

.spin {

padding: 0;

width: 8em;

height: 8em;

}

.spin:hover {

color: #716969;

}

.spin::before, .spin::after {

left: 0;

top: 0;

}

.spin::before {

border: 2px solid transparent;

}

.spin:hover::before {

border-top-color: #fc1a02;

border-bottom-color: #fc1a02;

border-right-color: #fc1a02;

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 {

transform: rotate(270deg);

border-top: 2px solid #fc1a02;

border-right-width: 2px;

border-left-width: 2px;

transition: transform 0.4s linear 0s, border-left-width 0s linear 0.35s;

}

.circle {

box-shadow: none;

border-radius: 100%;

}

.circle::before, .circle::after {

border-radius: 100%;

}

.thick {

color: #716969;}

.thick :hover {

color: #fff;

font-weight: 700;

}

.thick::before {

border: 2.5em solid transparent;

z-index: -1;

}

.thick::after {

mix-blend-mode: color-dodge;

z-index: -1;

}

.thick:hover::before {

background: #fc1a02;

border-bottom-color: #fc1a02;

border-top-color: #fc1a02;

border-right-color: #fc1a02;

transition:

background 0s linear 0.4s,

border-right-color 0.15s linear 0.15s,

border-bottom-color 0.15s linear 0.25s;

border-top-color 0.15s linear,

}

.thick:hover::after {

border-top: 2.5em solid red;

border-left-width: 2.5em;

border-right-width: 2.5em;

}

.center:hover {

color: #fc1a02;

}

.center::before, .center::after {

top: 0;

left: 0;

height: 100%;

width: 100%;

transform-origin: center;

}

.center::before {

border-top: 2px solid #fc1a02;

border-bottom: 2px solid #fc1a02;

transform: scale3d(0, 1, 1);

}

.center::after {

border-left: 2px solid #fc1a02;

border-right: 2px solid #fc1a02;

transform: scale3d(1, 0, 1);

}

.center:hover::before, .center:hover::after {

transform: scale3d(1, 1, 1);

transition: transform 0.5s;

}

.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: #fc1a02;

}

.draw:hover::before, .draw:hover::after {

width: 100%;

height: 100%;

}

.draw:hover::before {

border-top-color: #fc1a02;

border-right-color: #fc1a02;

transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;

}

.draw:hover::after {

border-bottom-color: #fc1a02;

border-left-color: #fc1a02;

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: #fc1a02;

}

.meet::after {

top: 0;

left: 0;

}

.meet:hover::before {

border-top-color: #fc1a02;

border-right-color: #fc1a02;

}

.meet:hover::after {

border-bottom-color: #fc1a02;

border-left-color: #fc1a02;

transition: height 0.25s ease-out, width 0.25s ease-out 0.25s;

}

/*styling css*/

h1 {

font-size: 44px;

font-weight: 700;

}

.container {

isolation: isolate;

}

button {

background: none;

color: #716969;

font-size: inherit;

font-weight: 700;

position: relative;

border: 0;

box-sizing: border-box;

margin: 1em;

padding: 2em 2em;

box-shadow: inset 0 0 0 2px #55dc0f;

vertical-align: middle;

}

button::before, button::after {

width: 100%;

height: 100%;

content: '';

position: absolute;

box-sizing: inherit;

}

Therefore, see the code segment to create the CSS Border Transition Effects On Hover. you will be created successfully.

you have to face any trouble then comment me down below. I will try to resolve the problem as soon as possible. thanks for viewing these post.

CSS Border Transition Effects On Hover | Border Hover Animation

Explanation of Source Code for CSS Border Transition Effects On Hover | Border Hover Animation using CSS

First File: Create HTML File as the name “index.html” | Change Filename as you want

Second Step: Create CSS file as name “stylesheet.css” | change name as you want

Related Posts

About Author

admin