Exciting effects activated by hovering on a button

I'm attempting to create an animated effect by having a rectangle expand over the button when hovered by the user. However, I am unsure how to achieve this and have hit a roadblock.

Here's what I want:

  • There's a button.
  • There's a rectangle positioned somewhere.
  • The rectangle currently has a width of 0px.
  • I want the rectangle to increase from 0 to 200px in width when the button is hovered over. Not the button itself.

I am open to javascript solutions, but they must be explained at a beginner level for me to understand.

Currently, here is my code:

HTML:

<div class="flex-container">
   
    <div class="sidebar">

        <button style="margin-top: 100px;" onclick="Accueil()"><div style="z-index: 2;">Accueil</div></button>
            <div class="rectangle" name="acc" style="top: 100px;"></div>

        <button onclick="Thés()"><div style=&
quot;z-index: 2;">Thés</div></button> 
            <div class="rectangle" name="the" style="top: 100px;"></div>
        
        <button onclick="Tisanes()"><div style="z-index: 2;">Tisanes</div></button>
            <div class="rectangle" name="tis" style="top: 100px;"></div> 

        <button onclick="Théières()"><div style="z-index: 2;">Théières</div></button>
            <div class="rectangle" name="thei" style="top: 100px;"></div>

    </div>

CSS:

    .sidebar > button {
   margin: 20px; /* 30px margin between buttons */
   width: 200px;
   height: 60px;
   max-height: 60px !important;
   max-width: 200px !important; 
   background-color: #F5FAD2;
   text-align: center;
   font-size: 24px;
   border-radius: 7%;
   border: none;
   transition-duration: 0.4s;
   cursor: pointer;
   color: #404040;
   position: relative;
   
}

.rectangle {
   width: 0px;
   height: 60px;
   color: rgba(255, 255, 255, 0.144);
   border-radius: 7%;
   border: none;
   transition: width 1.1s ease 0s;
   transition-timing-function: ease;
   transition-delay: 0s;
   position: absolute;
   z-index: 1;
}

.rectangle button:hover {
   width: 200px;
}

Thank you.

Answer №1

<div class="btn"> Click Me </div>


btn{
  animation: pulsate 1s infinite;
}

btn:hover{
  background-color: #ffa500;
}

Answer №2

To enlarge the rectangle, you can include the transform property in the button's CSS class. Adjusting the scale value within the hover state will allow you to achieve the desired size effect. Simply copy and paste the provided CSS & HTML codes to implement this functionality.

CSS:

.sidebar>button {
            margin: 20px;
            /* Margin of 30px between buttons */
            width: 200px;
            height: 60px;
            max-height: 60px !important;
            max-width: 200px !important;
            background-color: #F5FAD2;
            text-align: center;
            font-size: 24px;
            border-radius: 7%;
            border: none;
            transition-duration: 0.4s;
            cursor: pointer;
            color: #404040;
            position: relative;

        }

        .btn:hover {
            width: 300px;
            transform: scale(1.3) perspective(0.4px);
        }

        .rectangle {
            color: rgba(255, 255, 255, 0.144);
            border-radius: 7%;
            border: none;
            position: absolute;
            z-index: 1;
        }

HTML:

<div class="flex-container">

        <div class="sidebar">

            <button style="margin-top: 100px;" class="btn">
                <div style="z-index: 2;">Home</div>
            </button>
            <div class="rectangle" name="home" style="top: 100px;"></div>

            <button class="btn">
                <div style="z-index: 2;">Teas</div>
            </button>
            <div class="rectangle" name="teas" style="top: 100px;"></div>

            <button class="btn">
                <div style="z-index: 2;">Herbal Teas</div>
            </button>
            <div class="rectangle" name="herbal-teas" style="top: 100px;"></div>
            
            <button class="btn">
                <div style="z-index: 2;">Teapots</div>
            </button>
            <div class="rectangle" name="teapots" style="top: 100px;"></div>

        </div>
    </div>

We hope this solution proves helpful for you!

Answer №3

Perhaps this information will prove helpful to you

.rectangle-out {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  background: #e1e1e1;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  padding:20px;
  color:#000;
  text-decoration: none; 
}
.rectangle-out:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #2098D1;
  -webkit-transform: scale(0);
  transform: scale(0);
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.rectangle-out:hover, .rectangle-out:focus, .rectangle-out:active {
  color: white;
}
.rectangle-out:hover:before, .rectangle-out:focus:before, .rectangle-out:active:before {
  -webkit-transform: scale(1);
  transform: scale(1);
}
<a class="rectangle-out" href="#">Rectangle Out</a>

Answer №4

Perhaps you will find this information helpful.

Check out my GitHub page for the complete source code with various animations when hovering over a button: https://github.com/jacksonkasi0/mhibuddy

Alternatively, you can visit my website at:

Here is an example of HTML:

 <div class="lo">
    <ul>
  
  <li>
    <a href="./love/love.html" target="_blank">
      <i class="fa fa-heart"></i>
    </a> 
  </li>
  </ul>
</div>

This snippet shows some CSS styling:

 .lo ul {
margin: 0;
padding: 0;
display: flex;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);}

.lo > ul > li {
list-style: none;
margin: 0 15px;}

.lo > ul > li > a {
position: relative; 
display: block;
width: 60px;
height: 60px;
text-align: center;
line-height: 63px;
background: #333;
border-radius: 50%;
font-size: 30px;
color: #666;
transition: 0.5s;}
/* Additional CSS styles and hover effects are included in the code */

Answer №5

I believe I have found what you need

.flex-container {
 display: flex;
  flex-direction: row;
  justify-content: center;
}

.rectangle {
  display: none;
}

.button {
   width: 200px;
   height: 60px;
   background-color: #F5FAD2;
   text-align: center;
   font-size: 24px;
   border-radius: 7%;
   border: none;
   transition-duration: 0.4s;
   cursor: pointer;
   color: #404040;
   position: relative;
   margin-right: 20px;
}

.button:hover + .rectangle {
  display: block;
  width: 200px;
}
 <div style="text-align:center" class="flex-container">
 <div class = "button">Home</div>
  <div class="rectangle">test</div>
  <div class = "button">Teas</div>
  <div class="rectangle">test</div>
  <div class = "button">Herbal Teas</div>
  <div class="rectangle">test</div>
  <div class = "button">Teapots</div>
  <div class="rectangle">test</div>
 </div>

You can view the fiddle I created with this information here: https://jsfiddle.net/mbmarketing4you/j92mgsy6/46/

To make the "rectangle" appear on hover, it needs to be a child of the button element.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Seeking a JavaScript tool specialized in compressing POST data?

Currently working on a chrome extension that sends HTML strings to a server using POST requests. Interested in compressing these large strings before sending them. Wondering if there are any JavaScript libraries that can help with this? ...

The toggle function for the classList ('open') is functioning correctly and can be seen in the inspect element tool, however, the website is not displaying the associated style

How can I make the .nav show styles in .open after clicking #menu-icon? Note: I used Bootstrap to create the nav HTML <!-- logo --> <div class="logo"> <img src="assets/logo.png" alt="logo g's shop& ...

What is the best way to ensure that two divs have aligned bottom edges?

I have a set of div containers positioned in different columns within a grid layout. I am looking for a way to identify the containers where the bottom edge is less than 50px higher than any other container, and adjust their heights so they align perfectly ...

Tips for Serializing and Deserializing an XML Document using Javascript

I keep encountering the error 'parameter1 is not a valid node' when using document.adoptNode. Here's the code snippet in question: $.ajax({ type: "GET", url: url, datatype: "xml", success: function (results) { ...

When using ngClass and the has-error class on load, the class will still be loaded even if the expression evaluates

When attempting to load the has-error class from Bootstrap using ng-class with a condition on a variable injected to the controller from my factory, I encounter an issue where even though the initial value of the variable is false, the has-error class load ...

Showing JSX/HTML content depending on the props received

Can you identify the name of this type of expression and do you know in what scenarios it should be applied? {props.type === "big" && <h2>{props.title}</h2>} ...

Implement a CSS class specifically for products with low stock within the single product page on WooCommerce

I need some assistance with adding a class to 'Low stock' in the code snippet below, as I am not very familiar with php. My goal is to style the Low Stock text in WooCommerce to appear orange using CSS. function change_stock_text( $availability ...

PHP: Parsing HTML Tables with Headers and Irregular Body Rows Using Simple HTML Dom Parser

In an HTML table, the data is structured as follows: Header 1 has Row 1, Header 2 has Row 2 and Row 3, while Header 3 has Row 4, Row 5, and Row 6. <table> <thead> <tr> <th>Header 1</th> </tr> </thead& ...

What is the method to show text on hover in angularjs?

I'm a beginner in AngularJS and I'm looking to show {{Project.inrtcvalue}} when the mouse hovers over values. Can anyone guide me on how to achieve this using AngularJS? <table ng-table="tableParams" show-filter="true" class="table" > ...

Adjusting the width of innerHtml within a React router link to match the parent element's width

My current challenge involves a table where a cell is represented as a link. Within this setup, I am incorporating html content into the text of the link: <TableCell align="left" classes={{root: classes.cellPadding}}> <Link className={classes.l ...

What is the appropriate conversion for a CSS property name starting with -webkit when working with React?

For example, using `-webkit-text-fill-color` resulted in an error when setting it to `'red'`, stating "Using kebab-case for CSS properties in objects is not supported. Did you mean WebkitTextFillColor?" I have attempted `WebkitTextFillColor`, `w ...

What is preventing HTML from triggering JavaScript when loaded inside a <div> with a script?

I'm working on creating a collapsible menu that I can easily customize on any page without the use of iframes. As someone new to web design, I have knowledge of CSS and HTML but I am currently learning JavaScript with limited experience in jQuery or A ...

Javascript data table pagination and custom attributes resulting in unexpected truncation of strings

Currently, I have implemented an Ajax functionality in my template to receive a JSON response and dynamically populate a datatable with the elements from that JSON: $('.bicam_tests').click(function(){ $.ajax({ type: 'GET', ...

Image in the background not showing up on Chrome or Internet Explorer

The issue I'm facing is that the background-image displays correctly in Firefox, but not in Chrome or IE. Despite trying various solutions found on Stackoverflow, such as disabling my ad-blocker, placing the code in the head of the file: <head> ...

Issues with positioning images using media queries

Can anyone help me center an img when the viewport width is 320px? I've attempted different approaches but so far, nothing has been successful. .logo { width: 55px; height: 55px; margin: 10px 0 10px 30px; float: left; } @media only screen a ...

Guide to Hosting HTML on a Server Separate from Heroku

I currently have my index.html and the necessary .js files hosted on Heroku, where everything is functioning properly. However, I wish to avoid directing my users to "myappname.herokuapp.com", so I am considering using my own website to host the .html file ...

The action does not execute when the form is submitted

I’m currently working on a simple registration form, but I’ve encountered an issue with my code. Despite troubleshooting, I can’t seem to identify any errors in my code. Upon submission of the form, the page fails to redirect to register.php. Below ...

Updating existing text to create personalized HTML dropdown menus

I have designed a unique set of dropdowns by using divs and checkboxes instead of the traditional elements My goal is to dynamically change the 'select-wrapper--title' text (e.g. the first option) based on the selected option in the dropdown I ...

Achieving a transparent inner box-shadow effect on hover: a step-by-step guide

Is there a way to make the black ring transparent upon hover by changing box-shadow: 0 0 0 5px #000, 0 0 0 10px green to box-shadow: 0 0 0 5px transparent, 0 0 0 10px green? It doesn't seem to be working for me. Any suggestions on how to achieve this ...

incorrect application of margin and padding

Check out my HTML & CSS code. I'm facing an issue with the top padding, which should be 20px but is currently set at 10px. Here's a screenshot showing the problem. I've attempted to adjust margins and padding on different elements, but noth ...