Interactive
Interactivity plays a crucial role in modern web design, enriching user experiences and driving engagement. From interactive buttons and navigation menus to dynamic forms and immersive multimedia content, interactive elements captivate users, encourage exploration, and foster deeper connections with the website. By seamlessly integrating interactive features, websites become more intuitive, engaging, and memorable for visitors. .
Illustration of Interactive Implementations
A. Button Hover Effect with Click Redirect
Explore Our NurseryB. Required Field Form Validation
C. See more interactive examples on the following pages:
HTML Code
A. Button Hover Effect with Click Redirect
<a class="c-hero__explore-link l-p-1 u-primary-cta-bgcolor u-primary-cta-font u-button l-ml-1-25 l-mt-1"
href="coming-soon.html">Explore Our Nursery</a>
B. Required Field Form Validation
<form class="c-newsletter__form l-flex l-flex-column l-flex-center-items l-mt-1-25"
method="post"
action="https://learndigital.dev/DGL103/dgl103-form.php">
<div class="c-newsletter__label-wrapper l-flex l-flex-column">
<label for="fname" class="c-newsletter__label l-flex-start-self">First Name</label>
<input class="c-newsletter__input l-p-1" type="text" id="fname" name="firstname" placeholder="Ex: Mary">
</div>
<div class="c-newsletter__label-wrapper l-flex l-flex-column">
<label for="email" class="c-newsletter__label l-flex-start-self">Email Address<span class="c-newsletter__label-required">* (required)</span></label>
<input class="c-newsletter__input l-p-1" type="email" id="email" name="email" placeholder="Ex: mary@gmail.com" required>
</div>
<input class="c-newsletter__submit u-primary-cta-bgcolor u-primary-cta-font u-button l-mt-1-25 l-p-1 u-letter-spacing-4"
type="submit"
value="Submit">
</form>