CSS Button Hover Effects
Simple Button Hover Effects Codepen Type
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML VS CSS</title>
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" />
<style>
body {
padding: 0;
margin: 0;
padding-top: 150px;
}
H1 {
text-align: center;
padding-bottom: 50PX;
font-size: 50PX;
}
.buttonClass {
font-size: 15px;
font-family: Arial;
border-width: 1px;
color: #fff;
font-weight: bold;
}
.hvc {
padding-right: 20px;
}
.btn1 {
box-shadow: 0px 10px 14px -7px #276873;
text-shadow: 0px 1px 0px #3d768a;
background: linear-gradient(#ff00dd, #0804ff);
padding: 12px;
margin: 20px;
text-decoration: none;
}
.btn1:hover {
background: linear-gradient(#002fff, #ff00ea);
}
.btn2 {
box-shadow: 0px 10px 14px -7px #276873;
text-shadow: 0px 1px 0px hsl(196, 39%, 39%);
background: linear-gradient(#ffee00, #00eeff);
padding: 10px;
margin: 20px;
text-decoration: none;
}
.btn2:hover {
background: linear-gradient(#00eeff, #ffee00);
}
.btn3 {
box-shadow: 0px 10px 14px -7px #276873;
text-shadow: 0px 1px 0px hsl(196, 39%, 39%);
background: linear-gradient(#00ffbf, #132a2c);
padding: 10px;
margin: 20px;
text-decoration: none;
}
.btn3:hover {
background: linear-gradient(#132a2c, #00ffbf);
}
.btn6 {
box-shadow: 0px 10px 14px -7px #276873;
text-shadow: 0px 1px 0px hsl(196, 39%, 39%);
background: linear-gradient(#b700ff, #ff0095);
padding: 10px;
margin: 20px;
text-decoration: none;
}
.btn6:hover {
background: linear-gradient(#ff0095, #b700ff);
}
.btn7 {
box-shadow: 0px 10px 14px -7px #276873;
text-shadow: 0px 1px 0px hsl(196, 39%, 39%);
background: linear-gradient(#ffffff, #00eeff);
padding: 10px;
margin: 20px;
text-decoration: none;
}
.btn7:hover {
background: linear-gradient(#00eeff, #ffffff);
}
.btn8 {
box-shadow: 0px 10px 14px -7px #276873;
text-shadow: 0px 1px 0px hsl(196, 39%, 39%);
background: linear-gradient(#ff0077, #00a508);
padding: 10px;
margin: 20px;
text-decoration: none;
}
.btn8:hover {
background: linear-gradient(#00a508, #ff0077);
}
.btn9 {
box-shadow: 0px 10px 14px -7px #276873;
text-shadow: 0px 1px 0px hsl(196, 39%, 39%);
background: linear-gradient(#12337c, #ff0000);
padding: 10px;
margin: 20px;
text-decoration: none;
}
.btn9:hover {
background: linear-gradient(#ff0000, #12337c);
}
</style>
</head>
<body>
<div class="box">
<H1>HTML VS CSS</H1>
<a href="#" class="buttonClass btn9"><i class="fab fa-asymmetrik hvc"></i>Button text</a>
<a href="#" class="buttonClass btn2"><i class="fas fa-ambulance hvc"></i> Button text</a>
<a href="#" class="buttonClass btn1"><i class="fab fa-amazon-pay hvc"></i>Button text</a>
<a href="#" class="buttonClass btn3"><i class="fab fa-android hvc"></i>Button text</a>
<a href="#" class="buttonClass btn6"><i class="fab fa-angular hvc"></i>Button text</a>
<a href="#" class="buttonClass btn7"><i class="fab fa-apple-pay hvc"></i>Button text</a>
<a href="#" class="buttonClass btn8"><i class="fas fa-archway hvc"></i>Button text</a>
</div>
</body>
</html>
Button 1 lien CSS
How To Use This Cord
steps
- Fast One Copy Html File.
- Copy CSS File And Past Head Part Top Fo Html File.
- File Save Name.html
- Ran Html File
- Ready To Use
- CSS Button Hover Effects
- Button Hover CSS Effects
- Button Hover Effect Css
- Button Hover Effects CSS
- CSS Buttons Hover Effects
- CSS Hover Effects Button
- CSS Animate Button
- CSS Buttons Animations
- CSS Buttons Design
- CSS Design Button
