Animated Button in HTML and CSS: Button Design in HTML and CSS: HTML CSS:

Animated Button in HTML and CSS: Button Design in HTML and CSS: HTML CSS:





What is Animation?

An animation lets an element gradually change from one style to another. You can change as many CSS properties you want, as many times as you want. To use CSS animation, you must first specify some keyframes for the animation. Keyframes hold what styles the element will have at certain times.



HTML CODE:

<!DOCTYPE html>
<html>
<head>
<title> Title Here... </title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<body>

<button class="button">Click Me</button>

</body>
</html>


CSS CODE:

.button {
  position: relative;
  background-color: #0077ff;
  border: none;
  font-size: 28px;
  color: #FFFFFF;
  padding: 10px 15px;;
  text-align: center;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  text-decoration: none;
  overflow: hidden;
  outline: none;
  cursor: pointer;
}

.button:after {
  content: "";
  background: #00008B;
  display: block;
  position: absolute;
  padding-top: 300%;
  padding-left: 350%;
  margin-left: -20px!important;
  margin-top: -120%;
  opacity: 0;
  transition: all 0.8s
}

.button:active:after {
  padding: 0;
  margin: 0;
  opacity: 1;
  transition: 0s
}
Muhammad bin yasir

Hello friends, My name is Muhammad bin yasir. I am 13 years old.I read in class 8.

Post a Comment

Previous Post Next Post