Skip to main content

Next Button Design | Rustcode

by Rustcode
Next-Button-Design-HTML-And-CSS-Rustcode

The "next button design" with the animation effect sounds great. You can create the design of this button in a few minutes because this effect uses very simple code of CSS and HTML, which you will see later in this article.

The "next button" animation will work when you hover over the button. After the hover, an arrow will be shown on the button, which makes the animation very attractive.

Apart from this animation button, we have other button animations which are generally used in website development. You can read our other articles on button animation.



1. HTML STRUCTURE

<!DOCTYPE html>
<html>
<head>
  <title>Next Button Design | Rustcode</title>	
  <link rel="stylesheet" href="style.css">
</head>

<body>

    main content.

</body>
</html>


2. HTML

  <body>
    <button class="button"><span>Next</span></button>
  </body>



3. CSS

.button{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: blue;
  border: none;
  color: white;
  text-align: center;
  font-family: Arial;
  font-weight: bold;
  font-size: 28px;
  padding: 20px;
  width: 200px;
  cursor: pointer;
  transition: all 0.5s;
}
.button span{
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
.button span::after{
  content: "\00bb";
  position: absolute;
  opacity: 0;
  top: 0px;
  right: -20px;
  transition: 0.5s;
}
.button:hover span{
  padding-right: 25px;
}
.button:hover span::after{
  opacity: 1;
  right: 0px;
}


4. Youtube Video

Here I am attaching a YouTube video from my channel so that you can understand this article better and you can create a better web user interface. I have a lot of videos on my YouTube channel which is related to the user interface and web development. You can also, learn about web development from there.




5. SOURCE CODE

After reading this article and watching a YouTube video, if you want to download source code, you can download from here and change this according to your need.



RELATED POST:

Comments

Post a Comment