Creative Button Animation Hover Effect

Hello guys, In this video you will learn how to create creative button animation hover effect using html and css.

Step:#1

Add below code inside index.html

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

<head>
<meta charset=”UTF…


This content originally appeared on DEV Community and was authored by Stackfindover

Hello guys, In this video you will learn how to create creative button animation hover effect using html and css.

Step:#1

Add below code inside index.html

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

<head>
  <meta charset="UTF-8" />
  <title>Awesome Button Css</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <link rel="stylesheet" href="style.css" />
  <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&display=swap" rel="stylesheet">
</head>

<body>
  <div class="button-outer">
    <button class="button">Hover Me</button>
  </div>
</body>

</html>

Step:#2

Then we need to add code for style.css which code I provide in the below screen.

* {
  padding: 0;
  margin: 0;
  font-family: 'IBM Plex Sans', sans-serif;
}

html,
body {
  height: 100%;
  background: #000;
}

.button-outer {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.button {
  height: 50px;
  padding: 0 30px;
  font-size: 18px;
  border: 5px solid #fff;
  cursor: pointer;
  background: #4b00ff;
  color: #fff;
  border-radius: 50px;
  position: relative;
  overflow: hidden;
  transition: left 0.5s ease-in-out;
}

.button:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: -200px;
  top: 0;
  background: linear-gradient(45deg, #f90, transparent);
  transition: left 0.5s ease-in-out;
}

.button:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  right: -200px;
  top: 0;
  background: linear-gradient(45deg, transparent, #f90);
  transition: right 0.5s ease-in-out;
}

.button:hover:after {
  right: 0;
  animation: infinite-spinning 10s 0.5s infinite;
}

.button:hover:before {
  left: 0;
  animation: infinite-spinning 10s 0.5s infinite;
}

@keyframes infinite-spinning {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}


This content originally appeared on DEV Community and was authored by Stackfindover


Print Share Comment Cite Upload Translate Updates
APA

Stackfindover | Sciencx (2021-05-26T16:41:09+00:00) Creative Button Animation Hover Effect. Retrieved from https://www.scien.cx/2021/05/26/creative-button-animation-hover-effect/

MLA
" » Creative Button Animation Hover Effect." Stackfindover | Sciencx - Wednesday May 26, 2021, https://www.scien.cx/2021/05/26/creative-button-animation-hover-effect/
HARVARD
Stackfindover | Sciencx Wednesday May 26, 2021 » Creative Button Animation Hover Effect., viewed ,<https://www.scien.cx/2021/05/26/creative-button-animation-hover-effect/>
VANCOUVER
Stackfindover | Sciencx - » Creative Button Animation Hover Effect. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/05/26/creative-button-animation-hover-effect/
CHICAGO
" » Creative Button Animation Hover Effect." Stackfindover | Sciencx - Accessed . https://www.scien.cx/2021/05/26/creative-button-animation-hover-effect/
IEEE
" » Creative Button Animation Hover Effect." Stackfindover | Sciencx [Online]. Available: https://www.scien.cx/2021/05/26/creative-button-animation-hover-effect/. [Accessed: ]
rf:citation
» Creative Button Animation Hover Effect | Stackfindover | Sciencx | https://www.scien.cx/2021/05/26/creative-button-animation-hover-effect/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts