Button Hover Effect using Boxshadow property in HTML and CSS3

   

Smooth Button Hover Animation Effect 


HTML CODE

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Button hover effect</title>
<link rel="stylesheet" href="style.css">
</head>

<body>
<button class="name noselect">Hover Me!</button>
</body>

</html>

CSS Code(style.css)

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #4158D0;
background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);

}

.noselect {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

button {
  width: 150px;
  height: 50px;
  cursor: pointer;
  font-size: 20px;
  font-weight: bold;
  color: black;
  background: white;
  border: 2px solid black;
  box-shadow: 5px 5px 0 black,
    -5px -5px 0 black,
    -5px 5px 0 black,
    5px -5px 0 black;
  transition: 500ms ease-in-out;
}

button:hover {
  box-shadow: 20px 5px 0 black, -20px -5px 0 black;
}

button:focus {
  outline: none;
}

Watch video




Comments

Post a Comment

Popular posts from this blog

Domino's Logo using HTML & CSS3

Image
 Domino's Logo Using CSS HTML CODE <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="refresh" content="3"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Domino's Logo</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="dominos">   <span class="d1"></span>   <span class="d2"></span> </div> <script src="codee.js"></script> </body> </html> CSS Code(style.css) body {   background-color: #333;   text-align: center; } .dominos {   background-color: #fff;   display: inline-block;   font-size: 0;   padding: 5px;   border-radius: 30px;   margin: 150px 20px 20px 20px;   transform: rotate(-45deg); } .d1 {   background-color: #0079ae;   width: 250px; ...
Read more

create 3D image hover effect using html and css

Image
      3D Image Hover Effect in CSS3 HTML CODE <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="refresh" content="4000"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>3D Hover Effect</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <div class="row"> <div class="tdimension"> <a href="#"> </a> </div> </div> </div> </body> </html> CSS Code(style.css) body { background: #ECECEC; } .container { width: 100wh; height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; } .row { margin-top: 12px; } .tdimension { width: 300px; height: 300px; margin: 20px ...
Read more

Pheli baar song sing by ajay atul in kapil sharma show | pehli baar marathi version

Image
pehli baar song sing by ajay atul in the show of kapil sharma. Singer and muscian Ajay atul comes in kapil sharma show. In which kapil request to ajay atul to sing a song that is "pheli baar" from movie of sairat and dhadak. Then ajay atul start sing pheli baar song in the show as kapil request. Lots of youtuber share this song video clip on youtube and other social media platforms. The clips get show much viral on the internet.
Read more