locked
side button display RRS feed

  • Question

  • User702049738 posted

    Hello Experts;

    I am trying to create a two side buttons. The buttons will be located on the far left of a page and the middle. please see illustration below

    Button A

    Button B

    Furthermore, when it mouse is over the button it should increate in size. this is the code i have so far

    https://jsfiddle.net/arrh4n31/

    The problems i am having are as follows below

    1) the button are not centered aligned to the left of the page

    2) this is still a small gap better the two buttons. I do not want the gap to be there

    3) I am have a difficult time, creating a situation where if the mouse is over the button, then it should increase in size as a means of identification

    All help is appreaciated.

    Thursday, February 8, 2018 5:43 PM

All replies

  • User-832373396 posted

    Hi <g class="gr_ gr_8 gr-alert gr_spell gr_inline_cards gr_disable_anim_appear ContextualSpelling" id="8" data-gr-id="8">olybobo</g>,

    olybobo

    1) the button are not centered aligned to the left of the page

    2) this is still a small gap better the two buttons. I do not want the gap to be there

    3) I am have a difficult time, creating a situation where if the mouse is over the button, then it should increase in size as a means of identification

    Sir, I do an working example for you.

    full code

    <div class="container">
      <div class="header">
     here is header 
      </div>
      <div class="side"> 
         <div class="twobutton" >   
                  <button type="button">button A</button>      
                  <button type="button">button B</button> 
         </div>
      </div> 
      <div class="content">
            here is content
      </div>
      <div class="footer">
            here is footer 
      </div>
    </div>

    and CSS

    *{
      padding:0;
      margin:0;
      text-align:center;
    } 
    .header,.footer{  
      width: 100%;
    }
    .side{ 
      width:30%;
      height: 110px;
      background-color:yellow;
      ;
    }
    .twobutton{
       height:50px;
       width: 80px;   
       margin:auto; 
      /* background-color:white;*/
       
       ;
       top: 50%;
       transform: translateY(-50%);
    }
    .content{ 
      width:70%;
    }
    .header,.side,.content,.footer{
       float:left;  
    }
    button{  
           display: block;
    }
    button:hover{
      
      width:70px;
        height:30px;
    }

    With regards, Angelina Jolie

    Friday, February 9, 2018 7:33 AM
  • User702049738 posted

    Hi Angie;

    The only issue from the working example is it is not located to the far left edge of the page. I want it at the far edge of the page.

    Friday, February 9, 2018 1:44 PM
  • User-832373396 posted

    Hi sir,

    Please change to

    *{
      padding:0;
      margin:0;
      text-align:center;
    } 
    .header,.footer{  
      width: 100%;
    }
    .side{ 
      width:30%;
      height: 110px;
      background-color:yellow;
      ;
    }
    .twobutton{
       height:50px;
       width: 80px;   
      /* margin:auto; */
      /* background-color:white;*/
       
       ;
       top: 50%;
       transform: translateY(-50%);
    }
    .content{ 
      width:70%;
    }
    .header,.side,.content,.footer{
       float:left;  
    }
    button{  
           display: block;
    }
    button:hover{
      
      width:70px;
        height:30px;
    }
     
    Welcome to back if any question with my code ;)
    jolie
    Saturday, February 10, 2018 3:28 AM