I have made a form, and at the bottom, I made a button to submit the form. I also made some transitions in this button while hovering, but it is not working.
The transition is working something like that: when we hover over it the background color of the button will change, and when we remove it, the background color will be removed. Also, from where we remove the cursor, only there the transition will complete. The following are the codes-
const btns = document.querySelectorAll('.btn');
for (i = 0; i < btns.length; i++) {
let btn = btns[i];
btn.onmousemove = function(e) {
const x = e.pageX - btn.offsetLeft;
const y = e.pageY - btn.offsetTop;
btn.style.setProperty('--x', x + 'px');
btn.style.setProperty('--y', y + 'px');
}
}* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.contact-main-container {
width: 100%;
height: auto;
}
.contact-main-container .bg-vid {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
object-fit: cover;
}
.contact-main-container .overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.45);
opacity: 1;
visibility: visible;
}
.contact-main-container .contact-main-sub-container {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 1;
position: relative;
padding: 0 calc(clamp(2.5em, 8vw, 8em) * 2);
padding-top: clamp(5em, 21vh, 12em);
color: #fff;
}
.contact-main-container .contact-main-sub-container .contact-title {
width: 100%;
}
.contact-main-container .contact-main-sub-container .contact-title h2 {
font-size: calc(clamp(3.25em, 5vw, 8em) * .667);
}
.contact-main-container .contact-main-sub-container .contact-form-sub-container {
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: center;
padding-top: clamp(5em, 21vh, 12em);
position: relative;
}
.contact-main-container .contact-main-sub-container .contact-form-sub-container .contact-form-container {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: center;
width: 73%;
padding-right: calc(clamp(2.5em, 8vw, 8em) / 2);
/* padding-top: clamp(5em, 21vh, 12em); */
position: relative;
}
.contact-main-container .contact-main-sub-container .contact-form-sub-container .contact-form-container .form {
width: 100%;
}
.contact-main-container .contact-main-sub-container .contact-form-sub-container .contact-form-container .form .form-col {
display: block;
width: 100%;
font-size: 1.33em;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
padding: 0 2.75em;
position: relative;
}
.contact-main-container .contact-main-sub-container .contact-form-sub-container .contact-form-container .form .form-col:nth-child(1) {
border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.contact-main-container .contact-main-sub-container .contact-form-sub-container .contact-form-container .form .form-col h5 {
position: absolute;
left: 0;
top: 3.4em;
opacity: .33;
color: #fff;
font-weight: 450;
font-style: normal;
font-size: .6em;
line-height: 1.065;
margin-bottom: 1em;
text-transform: uppercase;
letter-spacing: .05em;
}
.contact-main-container .contact-main-sub-container .contact-form-sub-container .contact-form-container .form .form-col .label {
width: 100%;
display: block;
margin-bottom: 0;
color: #fff;
font-weight: 450;
padding-top: 1.66em;
transition: all .2s ease-in-out;
}
.contact-main-container .contact-main-sub-container .contact-form-sub-container .contact-form-container .form .form-col .label.textarea-label {
line-height: 80px;
}
.contact-main-container .contact-main-sub-container .contact-form-sub-container .contact-form-container .form .form-col .field {
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
width: 100%;
padding: 1em 0 2em 0;
border: 0;
border-radius: 0;
font-weight: 450;
font-size: 1em;
color: #fff;
line-height: normal;
display: block;
margin-top: -0.33em;
background: transparent;
outline: none;
}
.contact-main-container .contact-main-sub-container .contact-form-sub-container .contact-form-container .form .form-col .field.textarea {
resize: none;
padding-top: 0.9em;
}
.contact-main-container .contact-main-sub-container .contact-form-sub-container .contact-form-container .form .submit-button {
background-color: white;
display: flex;
justify-content: center;
align-items: center;
margin: 80px 0;
height: 0;
}
.contact-main-container .contact-main-sub-container .contact-form-sub-container .contact-form-container .form .submit-button .btn {
font-weight: 400;
font-size: 16px;
line-height: 19px;
letter-spacing: 0.5px;
text-transform: uppercase;
font-family: 'Montserrat';
color: #FFFFFF;
text-decoration: none;
border: 1px solid #42CDE7;
padding: 14px 55px;
position: relative;
overflow: hidden;
background: transparent;
}
.contact-main-container .contact-main-sub-container .contact-form-sub-container .contact-form-container .form .submit-button .btn::before {
content: '';
position: absolute;
top: var(--y);
left: var(--x);
transform: translate(-50%, -50%);
width: 0px;
height: 0px;
border-radius: 50%;
background-color: #42CDE7;
transition: width 0.7s, height 0.7s;
}
.contact-main-container .contact-main-sub-container .contact-form-sub-container .contact-form-container .form .submit-button .btn:hover::before {
width: 500px;
height: 500px;
}
.contact-main-container .contact-main-sub-container .contact-form-sub-container .contact-form-container .form .submit-button .btn span {
position: relative;
z-index: 1;
}
.contact-main-container .contact-main-sub-container .contact-form-sub-container .contact-details-container {
width: 27%;
padding-left: calc(clamp(2.5em, 8vw, 8em) / 2);
position: relative;
}
.contact-main-container .contact-main-sub-container .contact-form-sub-container .contact-details-container .arrow {
position: absolute;
width: clamp(0.9em, 1.1vw, 1.1em);
transform: translateY(-200%);
}
.contact-main-container .contact-main-sub-container .contact-form-sub-container .contact-details-container .arrow i {
transform: rotate(45deg);
font-size: 25px;
font-weight: 600;
}
.contact-main-container .contact-main-sub-container .contact-form-sub-container .contact-details-container .contact-section {
padding-bottom: 2.5em;
}
.contact-main-container .contact-main-sub-container .contact-form-sub-container .contact-details-container .contact-section h5 {
font-weight: 450;
font-style: normal;
font-size: .8em;
line-height: 1.065;
margin-bottom: 1em;
text-transform: uppercase;
letter-spacing: .05em;
opacity: .5;
color: #fff;
}
.contact-main-container .contact-main-sub-container .contact-form-sub-container .contact-details-container .contact-section ul {
list-style: none;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.contact-main-container .contact-main-sub-container .contact-form-sub-container .contact-details-container .contact-section ul li {
display: flex;
align-items: center;
height: 2em;
}
.contact-main-container .contact-main-sub-container .contact-form-sub-container .contact-details-container .contact-section ul li a {
font-size: 1.2em;
display: flex;
align-items: center;
justify-content: center;
position: relative;
text-decoration: none;
text-transform: capitalize;
will-change: transform;
outline: 0;
color: #fff;
background: transparent;
}
.contact-main-container .contact-main-sub-container .contact-form-sub-container .contact-details-container .contact-section ul li a.email {
text-transform: lowercase;
}
.contact-main-container .contact-main-sub-container .contact-form-sub-container .contact-details-container .contact-section p {
font-size: 1.2em;
display: flex;
align-items: center;
justify-content: flex-start;
position: relative;
text-decoration: none;
text-transform: capitalize;
will-change: transform;
outline: 0;
color: #fff;
background: transparent;
}
.submit-button {
background-color: white;
display: flex;
justify-content: center;
align-items: center;
margin: 80px 0;
height: 0;
}
.submit-button .btn {
font-weight: 400;
font-size: 16px;
line-height: 19px;
letter-spacing: 0.5px;
text-transform: uppercase;
font-family: 'Montserrat';
color: #FFFFFF;
text-decoration: none;
border: 1px solid #42CDE7;
padding: 14px 55px;
position: relative;
overflow: hidden;
background: transparent;
}
.submit-button .btn::before {
content: '';
position: absolute;
top: var(--y);
left: var(--x);
transform: translate(-50%, -50%);
width: 0px;
height: 0px;
border-radius: 50%;
background-color: #42CDE7;
transition: width 0.7s, height 0.7s;
}
.submit-button .btn:hover::before {
width: 500px;
height: 500px;
}
.submit-button .btn span {
position: relative;
z-index: 1;
}<div class="contact-main-container">
<video src="videos/contact-bg.mp4" autoplay="" type="video/mp4" loop="" class="bg-vid" muted=""></video>
<div class="overlay playvideo" style=""></div>
<div class="contact-main-sub-container">
<div class="contact-title">
<h2>Let's start <br> work together</h2>
</div>
<div class="contact-form-sub-container">
<div class="contact-form-container">
<form class="form" method="post" action="">
<div class="form-col">
<h5>01</h5>
<label class="label" for="name">What's your name?</label>
<input class="field" type="text" id="form-name" name="name" value="" required=""
placeholder="Lorem *">
</div>
<div class="form-col">
<h5>02</h5>
<label class="label" for="email">What's your email?</label>
<input class="field" type="email" id="form-email" name="email" value="" required=""
placeholder="[email protected] *">
</div>
<div class="form-col">
<h5>03</h5>
<label class="label" for="email">What's the name of your organization?</label>
<input class="field" type="text" id="form-company" name="company" value="" required=""
placeholder="lorem®">
</div>
<div class="form-col">
<h5>03</h5>
<label class="label" for="email">What's your mobile number?</label>
<input class="field" type="text" id="form-company" name="company" value="" required=""
placeholder="9876543210">
</div>
<div class="form-col">
<h5>05</h5>
<label class="label textarea-label" for="message">Your message</label>
<textarea class="field textarea" type="text" id="form-message" name="message" rows="8"
required="" placeholder="Hello lorem, ... *"></textarea>
</div>
<div class="submit-button">
<button class="btn custom-cursor" data-btn type="submit">
<span>Send it!</span>
</button>
</div>
</form>
</div>
<div class="contact-details-container">
<div class="arrow">
<i class="fa-solid fa-arrow-right"></i>
</div>
<div class="contact-details contact-section">
<h5>contact details</h5>
<ul>
<li><a href="mailto:[email protected]" class="email">[email protected]</a></li>
<li><a href="tel:+919876543210" class="number">+91-9876543210</a></li>
</ul>
</div>
<div class="location contact-section">
<h5>location</h5>
<p class="location"> Location India</p>
</div>
<div class="social-media contact-section">
<h5>socials</h5>
<ul>
<li><a href="" class="lkd">linkedln</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
2
Answers
I think beacuse you didnt declare the i in the for loop (you should say let i = 0)
try that out, write the code base on the i. now your loop doesn’t work at all🤷♀️.
mybe your bug will fix.
also you can write the event like:
btn.addEventListener("onmousemove", function () {your code}
Try this :