Create Crossing Hover Button Using HTML And CSS

BUTTON




Its features:

  • Touching on the button will show the animation.

  • To move the button to the right or left of the page, use "float: left" or "float: right"

  • You can add a link to the name of the button.

  • You can change the model color via CSS if you want.

Try to create like yourself by following the codes below :

Step 1) Add to html : <h2>Create Crossing Hover Button Using HTML And CSS</h2> <div class="fifteen"> <div class="sixteen"> BUTTON </div> </div>
Step 2) Add to css : :root { --light: #0051a0; --dark: #ed9501; --text: #fff; } .fifteen { display: block; cursor: pointer; outline: none; border: none; background-color: var(--light); width: 320px; height: 56px; border-radius: 30px; font-size:21px; font-weight: bold; letter-spacing:4px; font-family:arial, sans-serif; color: var(--text); background-size: 100% 100%; box-shadow: 0 0 0 7px var(--light) inset; margin-bottom: 15px; float:left; } .fifteen:hover { background-image: linear-gradient( 145deg, transparent 10%, var(--dark) 10% 20%, transparent 20% 30%, var(--dark) 30% 40%, transparent 40% 50%, var(--dark) 50% 60%, transparent 60% 70%, var(--dark) 70% 80%, transparent 80% 90%, var(--dark) 90% 100% ); animation: background 3s linear infinite; } @keyframes background { 0% { background-position: 0 0; } 100% { background-position: 400px 0; } } .sixteen{ width:100%; height:auto; padding:16px; margin-left:99px; }

Thank you sir

Congratulations to you on visiting our page.

If you have any feedback, you can give advice through the "Contact Me" form.