How to place a button inside its parent container so that it perfectly covers the border of that container

user_530911 0
Viewed 180

I'm trying to recreate this component that consists of a button on the far right corner and a label that shows the name of file. enter image description here

In order to get that result, I'm using absolute position for the button, but you can easily tell that the button is inside its parent and not on top of it

enter image description here

HTML:

<div class="ctrl">
  <div class="upload">
    <label class="upload__file-name">Select a file</label>
    <button type="button" class="upload__choose">
      Browse
    </button>
  </div>
</div>

SCSS:

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

html {
  height: 100%;
  font-size: 62.5%; //1 rem = 10px; 10px/16px = 62.5%
  background-color: #562765;
 
}


body {
  box-sizing: border-box;
  height: 100%;
}

.file-input {
  display: none;
}

.ctrl {
  height: 4.8rem;
}

.upload {  
  height: 100%;
  width: 100%;
  background-color: rgba(#F0F0F0, 0.32);
  border: 1px solid #fff;
  box-sizing: border-box;
  border-radius: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0 0 23px;
  position: relative;
  &__file-name {
    display: inline-block;
    font-size: 1.4rem;
    font-weight: bold;
    line-height: 120%;
    color: rgba(#fff, 0.48);
  }
  &__choose {
    top: 0;
    right: 0;
    position: absolute;
    cursor: pointer;
    border: 0;
    height: 100%;
    color: #fff;

    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px 40px;

    background: linear-gradient(
        100.77deg,
        rgba(222, 102, 251, 0.4) 0%,
        rgba(222, 102, 251, 0) 53.8%
      ),
      #7036e9;
    box-shadow: 0px 1px 24px -1px rgba(13, 8, 70, 0.4);
    backdrop-filter: blur(20px);
    border-radius: 40px;
  }
}

Here's a codepen with the HTML + CSS (Sass) I used.

Is there any way I can make the button look like as it were placed on top of its container? In other words, how can I align the button's top, right, and bottom borders with its parent container?

Thanks.

sass css html
3 Answers

So as you can see in the below snippet, both container as well as to the button, the border-radius is 40px and padding is 15px.

So both will work accordingly.

Since the button is position: absolute, I have aligned it to the right most of the input. Both elements have same height due to the above mentioned reasons, the button will cover the entire area of input also.

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

.container {
  position: relative;
  margin: 20px;
  display: inline-block;
}

.container input {
  border: 1px solid #ddd;
  outline: none;
  box-sizing: border-box;
  border-radius: 40px;
  padding: 15px;
  position: relative;
}
.container button {
  position: absolute;
  right: 0;
  background: linear-gradient(
        100.77deg,
        rgba(222, 102, 251, 0.4) 0%,
        rgba(222, 102, 251, 0) 53.8%
      ),
      #7036e9;
  border-radius: 40px;
  color: #fff;
  padding: 15px;
  border: 1px solid #7036e9;
}
<div class='container'>
  <input type="text" />
  <button>Explorer</button>
</div>

user_33153330

Move the position: relative property to the .ctrl elements selector to make the absolutely positioned element relative to its border-box and not that of the upload element which is essentially the placeholder for the "input" background. Since it will then be taken out of the regular document flow and absolutely placed to the .upload elements parent, this will give the button the look that it is on top of the .upload element.

Provided the upload width inherits its parents width, you could also remove any residual border that may be showing underneath the button using a calculated width on the upload width property, something like width: calc(100% - 2px);

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

html {
  height: 100%;
  font-size: 62.5%;
  background-color: #562765;
}

body {
  box-sizing: border-box;
  height: 100%;
}

.file-input {
  display: none;
}

.ctrl {
  height: 4.8rem;
  position: relative;
}

.upload {
  height: 100%;
  width: calc(100% - 2px);
  background-color: rgba(240, 240, 240, 0.32);
  border: 1px solid #fff;
  box-sizing: border-box;
  border-radius: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0 0 23px;
}
.upload__file-name {
  display: inline-block;
  font-size: 1.4rem;
  font-weight: bold;
  line-height: 120%;
  color: rgba(255, 255, 255, 0.48);
}
.upload__choose {
  top: 0;
  right: 0px;
  position: absolute;
  cursor: pointer;
  border: 0;
  height: 100%;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px 40px;
  background: linear-gradient(100.77deg, rgba(222, 102, 251, 0.4) 0%, rgba(222, 102, 251, 0) 53.8%), #7036e9;
  box-shadow: 0px 1px 24px -1px rgba(13, 8, 70, 0.4);
  backdrop-filter: blur(20px);
  border-radius: 40px;
}
<input type="file" class="file-input">

<div class="ctrl">
  <div class="upload">
    <label class="upload__file-name">Select a file</label>
    <button type="button" class="upload__choose">
      Browse
    </button>
  </div>
</div>

user_15335920 
I have tried this, you can check


*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

html {
  height: 100%;
  font-size: 62.5%;
  background-color: #562765;
}

body {
  box-sizing: border-box;
  height: 100%;
}

.file-input {
  display: none;
}

.ctrl {
  height: 4.8rem;
}

.upload {
  height: 100%;
  width: 60%;
  margin: 50px auto;
  background-color: rgba(240, 240, 240, 0.32);
  border: 1px solid #fff;
  box-sizing: border-box;
  border-radius: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0 0 23px;
  position: relative;
}
.upload__file-name {
  display: inline-block;
  font-size: 1.4rem;
  font-weight: bold;
  line-height: 120%;
  color: rgba(255, 255, 255, 0.48);
}
.upload__choose {
  top: -1px;
  right: -1px;
  bottom: -1px;
  position: absolute;
  cursor: pointer;
  border: 0;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px 40px;
  background: linear-gradient(100.77deg, rgba(222, 102, 251, 0.4) 0%, rgba(222, 102, 251, 0) 53.8%), #7036e9;
  box-shadow: 0px 1px 24px -1px rgba(13, 8, 70, 0.4);
  backdrop-filter: blur(20px);
  border-radius: 40px;
}
<input type="file" class="file-input">
<div class="ctrl">
  <div class="upload">
    <label class="upload__file-name">Select a file</label>
    <button type="button" class="upload__choose">
      Browse
    </button>
  </div>
</div>

user_86894480
Related