Home Web Design CSS CSS Link Hover Effects | 8 Different Types Of Hover Effects

CSS Link Hover Effects | 8 Different Types Of Hover Effects

July 22, 2019

11537

How we can create different types of hover effects for a hyperlink using CSS? Solution: CSS Link Hover Effects, 8 Different Types Of Hover Effects.

I am sure that, You know what is a hover effect. Previously I have shared a link hover effect for WordPress, but here are some different types of hover effects which we can create using pure CSS. I also shared a post about Button Hover Effects, But this time effects are for link or hyperlink.

Today you will learn to create 8 different types of amazing hover effects for the links on a webpage. Nowadays most websites use special hover effects for their link inside the article, Even I also use one you can see in this post. Because this is on-trend, that’s why we should know to create some effects.

Today, I am sharing CSS Link Hover Effects, mouse over effects of hyperlinks available on the webpage. I have used pure CSS to creating these effects which I am sharing. These are some basics effects, but you can create a unique effect after know how it works. There are many basic CSS codes, but also has a separate class for each link to easy understanding.

If you are thinking now how these hover effects actually are, then see the preview given below.

Preview Of 8 Different Types Of Hover Effects

See this video preview to getting an idea of how effects are looks like.

Now you can see this visually. If you like this, then get the source code of its.

CSS Link Hover Effects Source Code

Before sharing source code, let’s talk about it. I have created 8 HTML hyperlinks inside the heading 2 tags. I have put separate classes for each <a> tag. The CSS classes are placed each link according to numbers, like for the first effect class= "effect1" for the second effect class= "effect2" .

As you can see in the preview, most of the effects are base on line effects. For creating these effects I have used CSS :before and :after properties. Basically, I have created lines using a border, padding, etc and scale them on mouse hover. For the last two effects, I have used the HTML Data-* (info) element for store custom data.

Here are too many basic CSS commands, I can’t explain all in writing. You will understand easily after getting the codes. For creating these, you have to create only 2 files. One for HTML, & 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>
<!--Code By Webdevtrick ( https://webdevtrick.com )-->
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Link Hover Effects | Web Dev Trick</title>
  <link href="https://fonts.googleapis.com/css?family=Staatliches&display=swap" rel="stylesheet">
  <link href="style.css" rel="stylesheet">
</head>

<body>
<h2><a class="effect1" href="#">1 Link Hover Effect</a></h2>
<h2><a class="effect2" href="#">2 Link Hover Effect</a></h2>
<h2><a class="effect3" href="#">3 Link Hover Effect</a></h2>
<h2><a class="effect4" href="#">4 Link Hover Effect</a></h2>
<h2><a class="effect5" href="#"><span>5 Link Hover Effect</span></a></h2>
<h2><a class="effect6" href="#"><span>6 Link Hover Effect</span></a></h2>
<h2><a class="effect7" href="#" data-content="7 Link Hover Effect"><span>7 Link Hover Effect</span></a></h2>
<h2><a class="effect8" href="#" data-content="8 Link Hover Effect"><span>8 Link Hover Effect</span></a></h2>
  
</body>
</html>

<!DOCTYPE html>

<head>

<title>Link Hover Effects | Web Dev Trick</title>

</head>

<body>

<h2><a class="effect1" href="#">1 Link Hover Effect</a></h2>

<h2><a class="effect2" href="#">2 Link Hover Effect</a></h2>

<h2><a class="effect3" href="#">3 Link Hover Effect</a></h2>

<h2><a class="effect4" href="#">4 Link Hover Effect</a></h2>

<h2><a class="effect5" href="#"><span>5 Link Hover Effect</span></a></h2>

<h2><a class="effect6" href="#"><span>6 Link Hover Effect</span></a></h2>

<h2><a class="effect7" href="#" data-content="7 Link Hover Effect"><span>7 Link Hover Effect</span></a></h2>

<h2><a class="effect8" href="#" data-content="8 Link Hover Effect"><span>8 Link Hover Effect</span></a></h2>

</body>

</html>

style.css

Now create a CSS file named ‘style.css‘ and put these codes.

/** Code By Webdevtrick ( https://webdevtrick.com ) **/
*, *:before, *:after {
  box-sizing: border-box;
}
body {
  width: 80%;
  margin: 50px auto;
  color: #333;
  font-family: 'Staatliches', cursive;
  background:#fbb016;
}
body:after {
  content: '';
  display: table;
  clear: both;
}
h2 {
  float: left;
  width: 100%;
  height: 44px;
  margin: 30px 0;
  line-height: 24px;
  text-align: center;
  font-weight: normal;
}
a, a > span {
  position: relative;
  color: inherit;
  text-decoration: none;
  line-height: 24px;
}
a:before, a:after, a > span:before, a > span:after {
  content: '';
  position: absolute;
  transition: transform .5s ease;
}

.effect1 {
  padding-top: 10px;
}
.effect1:before {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: #e60023;
  transform: scaleX(0);
}
.effect1:hover:before {
  transform: scaleX(1);
}

.effect2 {
  padding: 10px;
}
.effect2:before, .effect2:after {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-style: solid;
  border-color: #e60023;
}
.effect2:before {
  border-width: 2px 0 2px 0;
  transform: scaleX(0);
}
.effect2:after {
  border-width: 0 2px 0 2px;
  transform: scaleY(0);
}
.effect2:hover:before, .effect2:hover:after {
  transform: scale(1, 1);
}
.effect3 {
  display: inline-block;
  padding-top: 10px;
  padding-bottom: 5px;
  overflow: hidden;
}
.effect3:before {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: #e60023;
  transform: translateX(-100%);
}
.effect3:hover:before {
  transform: translateX(0);
}
.effect4 {
  padding: 10px;
  display: inline-block;
  overflow: hidden;
}
.effect4:before, .effect4:after {
  left: 0;
  width: 100%;
  height: 2px;
  background: #e60023;
}
.effect4:before {
  bottom: 0;
  transform: translateX(-100%);
}
.effect4:after {
  top: 0;
  transform: translateX(100%);
}
.effect4:hover:before, .effect4:hover:after {
  transform: translateX(0);
}
.effect5 {
  display: inline-block;
  overflow: hidden;
}
.effect5:before, .effect5:after {
  right: 0;
  bottom: 0;
  background: #e60023;
}
.effect5:before {
  width: 100%;
  height: 2px;
  transform: translateX(-100%);
}
.effect5:after {
  width: 2px;
  height: 100%;
  transform: translateY(100%);
}
.effect5 > span {
  display: block;
  padding: 10px;
}
.effect5 > span:before, .effect5 > span:after {
  left: 0;
  top: 0;
  background: #e60023;
}
.effect5 > span:before {
  width: 100%;
  height: 2px;
  transform: translateX(100%);
}
.effect5 > span:after {
  width: 2px;
  height: 100%;
  transform: translateY(-100%);
}
.effect5:hover:before, .effect5:hover:after, .effect5:hover > span:before, .effect5:hover > span:after {
  transform: translate(0, 0);
}

.effect6 {
  display: inline-block;
  overflow: hidden;
}
.effect6:before, .effect6:after {
  right: 0;
  bottom: 0;
  background: #e60023;
  transition: transform .3s ease;
}
.effect6:before {
  width: 100%;
  height: 2px;
  transform: translateX(-100%);
  transition-delay: .9s;
}
.effect6:after {
  width: 2px;
  height: 100%;
  transform: translateY(100%);
  transition-delay: .6s;
}
.effect6 > span {
  display: block;
  padding: 10px;
}
.effect6 > span:before, .effect6 > span:after {
  left: 0;
  top: 0;
  background: #e60023;
  transition: transform .3s ease;
}
.effect6 > span:before {
  width: 100%;
  height: 2px;
  transform: translateX(100%);
  transition-delay: .3s;
}
.effect6 > span:after {
  width: 2px;
  height: 100%;
  transform: translateY(-100%);
  transition-delay: 0s;
}
.effect6:hover:before, .effect6:hover:after, .effect6:hover > span:before, .effect6:hover > span:after {
  transform: translate(0, 0);
}
.effect6:hover:before {
  transition-delay: 0s;
}
.effect6:hover:after {
  transition-delay: .3s;
}
.effect6:hover > span:before {
  transition-delay: .6s;
}
.effect6:hover > span:after {
  transition-delay: .9s;
}
.effect7 {
  display: inline-block;
  overflow: hidden;
}
.effect7:before {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #e60023;
  transform: translateX(-100%);
}
.effect7:after {
  content: attr(data-content);
  left: 0;
  top: 0;
  width: 0;
  margin: 12px;
  color: #e60023;
  white-space: nowrap;
  overflow: hidden;
  transition: width .5s ease;
}
.effect7 > span {
  display: block;
  margin: 2px;
  padding: 10px;
  background: #fbb016;
}
.effect7:hover:before {
  transform: translateX(0);
}
.effect7:hover:after {
  width: calc(100% - 24px);
}
.effect8 {
  display: inline-block;
  overflow: hidden;
}
.effect8:before {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #e60023;
  transform: translateY(-100%);
}
.effect8:after {
  content: attr(data-content);
  top: 0;
  left: 0;
  height: 0;
  margin: 12px;
  color: #e60023;
  white-space: nowrap;
  overflow: hidden;
  transition: height .5s ease;
}
.effect8 > span {
  display: block;
  margin: 2px;
  padding: 10px;
  background: #fbb016;
}
.effect8:hover:before {
  transform: translateY(0);
}
.effect8:hover:after {
  height: calc(100% - 24px);
}

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

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

/** Code By Webdevtrick ( https://webdevtrick.com ) **/

*, *:before, *:after {

box-sizing: border-box;

}

body {

width: 80%;

margin: 50px auto;

color: #333;

font-family: 'Staatliches', cursive;

background:#fbb016;

}

body:after {

content: '';

display: table;

clear: both;

}

h2 {

float: left;

width: 100%;

height: 44px;

margin: 30px 0;

line-height: 24px;

text-align: center;

font-weight: normal;

}

a, a > span {

position: relative;

color: inherit;

text-decoration: none;

line-height: 24px;

}

a:before, a:after, a > span:before, a > span:after {

content: '';

position: absolute;

transition: transform .5s ease;

}

.effect1 {

padding-top: 10px;

}

.effect1:before {

left: 0;

bottom: 0;

width: 100%;

height: 2px;

background: #e60023;

transform: scaleX(0);

}

.effect1:hover:before {

transform: scaleX(1);

}

.effect2 {

padding: 10px;

}

.effect2:before, .effect2:after {

left: 0;

top: 0;

width: 100%;

height: 100%;

border-style: solid;

border-color: #e60023;

}

.effect2:before {

border-width: 2px 0 2px 0;

transform: scaleX(0);

}

.effect2:after {

border-width: 0 2px 0 2px;

transform: scaleY(0);

}

.effect2:hover:before, .effect2:hover:after {

transform: scale(1, 1);

}

.effect3 {

display: inline-block;

padding-top: 10px;

padding-bottom: 5px;

overflow: hidden;

}

.effect3:before {

left: 0;

bottom: 0;

width: 100%;

height: 2px;

background: #e60023;

transform: translateX(-100%);

}

.effect3:hover:before {

transform: translateX(0);

}

.effect4 {

padding: 10px;

display: inline-block;

overflow: hidden;

}

.effect4:before, .effect4:after {

left: 0;

width: 100%;

height: 2px;

background: #e60023;

}

.effect4:before {

bottom: 0;

transform: translateX(-100%);

}

.effect4:after {

top: 0;

transform: translateX(100%);

}

.effect4:hover:before, .effect4:hover:after {

transform: translateX(0);

}

.effect5 {

display: inline-block;

overflow: hidden;

}

.effect5:before, .effect5:after {

right: 0;

bottom: 0;

background: #e60023;

}

.effect5:before {

width: 100%;

height: 2px;

transform: translateX(-100%);

}

.effect5:after {

width: 2px;

height: 100%;

transform: translateY(100%);

}

.effect5 > span {

display: block;

padding: 10px;

}

.effect5 > span:before, .effect5 > span:after {

left: 0;

top: 0;

background: #e60023;

}

.effect5 > span:before {

width: 100%;

height: 2px;

transform: translateX(100%);

}

.effect5 > span:after {

width: 2px;

height: 100%;

transform: translateY(-100%);

}

.effect5:hover:before, .effect5:hover:after, .effect5:hover > span:before, .effect5:hover > span:after {

transform: translate(0, 0);

}

.effect6 {

display: inline-block;

overflow: hidden;

}

.effect6:before, .effect6:after {

right: 0;

bottom: 0;

background: #e60023;

transition: transform .3s ease;

}

.effect6:before {

width: 100%;

height: 2px;

transform: translateX(-100%);

transition-delay: .9s;

}

.effect6:after {

width: 2px;

height: 100%;

transform: translateY(100%);

transition-delay: .6s;

}

.effect6 > span {

display: block;

padding: 10px;

}

.effect6 > span:before, .effect6 > span:after {

left: 0;

top: 0;

background: #e60023;

transition: transform .3s ease;

}

.effect6 > span:before {

width: 100%;

height: 2px;

transform: translateX(100%);

transition-delay: .3s;

}

.effect6 > span:after {

width: 2px;

height: 100%;

transform: translateY(-100%);

transition-delay: 0s;

}

.effect6:hover:before, .effect6:hover:after, .effect6:hover > span:before, .effect6:hover > span:after {

transform: translate(0, 0);

}

.effect6:hover:before {

transition-delay: 0s;

}

.effect6:hover:after {

transition-delay: .3s;

}

.effect6:hover > span:before {

transition-delay: .6s;

}

.effect6:hover > span:after {

transition-delay: .9s;

}

.effect7 {

display: inline-block;

overflow: hidden;

}

.effect7:before {

left: 0;

top: 0;

width: 100%;

height: 100%;

background: #e60023;

transform: translateX(-100%);

}

.effect7:after {

content: attr(data-content);

left: 0;

top: 0;

width: 0;

margin: 12px;

color: #e60023;

white-space: nowrap;

overflow: hidden;

transition: width .5s ease;

}

.effect7 > span {

display: block;

margin: 2px;

padding: 10px;

background: #fbb016;

}

.effect7:hover:before {

transform: translateX(0);

}

.effect7:hover:after {

width: calc(100% - 24px);

}

.effect8 {

display: inline-block;

overflow: hidden;

}

.effect8:before {

left: 0;

top: 0;

width: 100%;

height: 100%;

background: #e60023;

transform: translateY(-100%);

}

.effect8:after {

content: attr(data-content);

top: 0;

left: 0;

height: 0;

margin: 12px;

color: #e60023;

white-space: nowrap;

overflow: hidden;

transition: height .5s ease;

}

.effect8 > span {

display: block;

margin: 2px;

padding: 10px;

background: #fbb016;

}

.effect8:hover:before {

transform: translateY(0);

}

.effect8:hover:after {

height: calc(100% - 24px);

}

That’s It. Now you have successfully created CSS Link Hover Effects, 8 Different Types Of Hover Effects. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting.

8 COMMENTS

Rahmat ali July 22, 2019 At 5:14 pm

Jazakallah bhai bohat acha hai superb

Reply
- shaan July 22, 2019 At 5:39 pm
  
  Thank you very much, Stay connected.
  
  Reply
Ankit July 27, 2019 At 12:20 pm

Awesome hovering effect. Lots of thanks to you.

Reply
- shaan July 27, 2019 At 2:25 pm
  
  Thank you very much, stay connected.
  
  Reply
Armel July 30, 2019 At 12:53 pm

Thanks very much shaan, It’s superb

Reply
- shaan July 30, 2019 At 2:20 pm
  
  thanks for your comment, please stay connected.
  
  Reply
Max Programming November 17, 2019 At 8:56 am

Thanks, it’s very useful to me

Reply
- shaan November 17, 2019 At 4:18 pm
  
  thanks please stay connected
  
  Reply