Photoshop Question posted in
The official user guide can be found here.

overlap buttons in div tag using css – Photoshop

hello just a quick question about overlapping two buttons with a div tag, how do i do it? i tried position and margin but both do not move the buttons.

heres the html:

<div class="container-fluid">
    <div style="margin:auto;">
        <button type="submit" class="btn-login">Log in</button>
    </div>
    <div class="signup-form">
    <label style="text-align:center;margin-bottom:20px">Create an Account</label>

    <div>
        <button type="submit" class="btn-login">Sign Up Free</button>
    </div>
        <label style="text-align:center;margin-bottom:20px;margin-top:20px">or</label>
    </div>
</div>
    <div class="social_media">
        <button type="submit" class="btn-facebook"></button>
        <button type="submit" class="btn-gmail"></button>
    </div> 
</body>

heres the css:

.signup-form {
    top:-40px;
    position:relative;
    box-sizing: border-box;
    margin: 25px auto;
    margin-bottom:0px;
    width: 100%;
    max-width:400px;
    background-color: white;
    padding: 50px 50px 50px 50px;
    box-shadow: 1px 5px 2px #330000;
    z-index: -1;
}

.social_media {
    text-align:center;
}

.btn-facebook {
    margin-bottom:60px;
    padding-left:30px;
    background-image: url(fb.gif);
    background-color: #3b5998;
    padding: 0px;
    border: 3px solid white;
    border-radius: 5px;
    box-shadow: 1px 2px 2px grey;
    background-size: contain;
    background-repeat: no-repeat;
    height: 70px;
    width: 70px;
    font-family: sans-serif;
    font-size: 16px;
    color: white;
}

.btn-gmail {
    margin-bottom:60px;
    top:50%;
    padding-right:30px;
    background-image: url(g+.gif);
    background-color: #dc4a38;
    padding: 0px;
    border: 3px solid white;
    border-radius: 5px;
    box-shadow: 1px 2px 2px grey;
    background-size: contain;
    background-repeat: no-repeat;
    height: 70px;
    width: 70px;
    font-family: sans-serif;
    font-size: 16px;
    color: white;
}

also the first screenshot is what it looks like now and the second is from a photoshopped image on what im trying to replicate

current look

photoshop

Tags:

3

Answers


  1. 0

    try adding to the btn classes

    position: absolute;

    then move them to desired position
    you may need to change the z index also.

    Login or Signup to reply.
  2. 0

    Set the position on the social_media div to relative and then use the top property to move them as needed. For example:

    .social_media {
    text-align:center;
    position: relative;
    top: -74px;
}

    jsFiddle example

    Login or Signup to reply.
  3. 0

    Set the position property value for the parent to relative (to control overlap) and that of the button DIV to absolute. Now place your button inside the button DIV, then use negative values for left, right, top or bottom to position the button DIV where you want.

    .parent {
  width: 150px;
  height: 150px;
  margin: 0 auto;
  background: red;
  position: relative;
}

.button {
  width: 100px;
  height: 45px;
  line-height: 45px;
  text-align: center;
  position: absolute;
  background: darkOrange;
  border-radius: 5px;
  bottom: -22.5px;
  left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%)
}
    <div class="parent">

<div class="button">

  <input type="button" value="my button" />
  
</div>

<div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search