Create a button that extends beyond the boundaries of the div

I am struggling to figure out how to create a button that overlaps a div. My goal is for the button to always be positioned at the bottom center of the div, even when the size of the div changes. I can usually create overlapping divs easily when they are not needed, but when I actually need one, it doesn't seem to work!

This is the markup I currently have:

.call_to_action{
  background-color: #000;
  height: 300px;
}
.button {
    background: #c43d3d;
    font-size: 24px;
    color: #FFFFFF;
    margin: 0;
    padding: 0;
    border: 0;
    cursor: pointer;
    padding: 20px 25px;
    width:200px;
    text-align: center;
}
.overlap-header {
    position: relative;
}
.overlap-button {
    position: relative;
    display: block;
    margin: 100px auto 25px;
}
<section class="call_to_action">
  <div class="wrapper">
    <div class="content-block">
      <div class="content-block-wrapper">
        <div class="overlap-header">
          <span class="button overlap-button">Read more</span>
        </div>
      </div>
    </div>
  </div>
</section>

https://i.sstatic.net/utbG2.png

Here's an image showcasing what I am aiming to achieve.

htmlcss

Answer №1

To create some spacing at the top, consider using a negative margin.

.call_to_action{
  background-color: #000;
  height: 300px;
}
.button {
    background: #c43d3d;
    font-size: 24px;
    color: #FFFFFF;
    margin: 0;
    padding: 0;
    border: 0;
    cursor: pointer;
    padding: 20px 25px;
    width:200px;
    text-align: center;
    
    top: -30px; /* Adjust this value */
}
.overlap-header {
    position: relative;
}
.overlap-button {
    position: relative;
    display: block;
    margin: 100px auto 25px;
}
<section class="call_to_action">
  <div class="wrapper">
    <div class="content-block">
      <div class="content-block-wrapper">
        <div class="overlap-header">
          <span class="button overlap-button">Read more</span>
        </div>
     </div>
  </div>
</section>

Answer №2

If you want to achieve this effect, follow these steps:

Firstly, update your .call_to_action class to have display:flex; and position: relative;. Next, include justify-content: center; to center the button horizontally.

Then, modify your .wrapper class to have position: absolute; and set a negative value for the bottom property.

.call_to_action{
  background-color: #000;
  height: 300px;
  
  position: relative;
  display: flex;
  justify-content: center;
}

.wrapper{
  position: absolute;
  bottom: -25px;
}

.button {
    background: #c43d3d;
    font-size: 24px;
    color: #FFFFFF;
    margin: 0;
    padding: 0;
    border: 0;
    cursor: pointer;
    padding: 20px 25px;
    width:200px;
    text-align: center;
}
.overlap-header {
    position: relative;
}
.overlap-button {
    position: relative;
    display: block;
}
<section class="call_to_action">
  <div class="wrapper">
    <div class="content-block">
      <div class="content-block-wrapper">
        <div class="overlap-header">
          <span class="button overlap-button">Read more</span>
        </div>
      </div>
    </div>
  </div>
</section>

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

In PHP, you can use the `echo` statement to output an HTML input

Incorporating HTML into PHP using heredoc methodology can sometimes lead to challenges when trying to retrieve user input variables. Attempting to access the input variable with $_GET["input"] may result in an error message indicating an undefined index: ...

javascriptphphtml

Can AngularJS Filters be used to convert a number into a string, but not the other way around?

After researching Angular JS filters, I discovered that the number filter is used to format a number as a string. However, there doesn't seem to be a built-in filter for converting a string to a number. In an attempt to solve this issue, here is so ...

javascripthtmlangularjsfiltertype-conversion

Ensuring the bottom border of an element extends to the edge of the screen when utilizing a 960 grid in HTML/CSS

I am currently working on creating a website layout using the 960 grid system developed by Nathansmith. I am facing an issue in extending the bottom border of an element to reach till the end of the screen while keeping the element inside a container div. ...

htmlcsspush960.gs

Formatting Results for Ajax Requests in Bootstrap Typeahead - A Practical Example

I am currently utilizing Bootstrap typeahead in conjunction with an ajax function, and I am wondering about the appropriate Json result format needed to retrieve an Id and a description. The reason for this is that I require the Id to link the selected ele ...

htmlajaxasp.net-mvc-3twitter-bootstrapbootstrap-typeahead

If padding is included, the width of an element will be affected when using rem

I am facing an issue in my project. Whenever I try to insert a custom font-size at the html level, the red badges get deformed when there is padding (p-6) on the first line of code. Can someone assist me with this problem? I am using Tailwind CSS, but even ...

htmlcsstailwind-css

Place the small span element underneath the title span

I am currently working on a layout that includes a list item with the title "Item 0", followed by a small tag containing the text "Description Item 0", and two select menus positioned to the right. The challenge I am facing is placing the small tag below t ...

htmltwitter-bootstrapcssbootstrap-4

How come I am unable to connect my CSS to my EJS files?

Having difficulty linking my css files to my ejs files. Using a standard node.js/express setup, I'm attempting to connect my main.css file from the public/css directory to my index.ejs file in views. The html and routing are functioning correctly. Ple ...

htmlcssnode.jsexpressejs

html form shifting positions based on screen resolution

I have been experimenting with a login screen design for my website recently. I created a form with a fixed position, but as the screen resolution changes, not only does the form's position shift, but also the image moves, causing an unwanted interse ...

javascripthtmlcss

Creating beautifully formatted HTML text in a PDF document using JavaFX and iText

Can you convert a styled HTML text (with color, alignment, etc.) from an editor like HTMLEditor to an editable PDF using iText? I've searched online but couldn't find any information on this. Appreciate any help. Thank you. ...

javahtmljavafxitexthtml-editor

Tips for choosing elements in JavaScript using querySelector even after they've been included in the code using innerHTML

Within the scenario below, a parent element is present in the HTML code and the span element with a class of 'child' is nested within the parent element using the createChild function. Subsequently, the content of the child element is modified el ...

javascripthtmldomqueryselector

Gathering information from an HTML form and displaying it through JavaScript by utilizing Bootstrap's card component

I've been working on integrating form data from my index.html page into a card component using Bootstrap. I've successfully collected the data in the backend, but now I'm struggling to display it on the frontend as a card component. Any help ...

javascripthtmlcssformsobject

What is the process for generating a HORIZONTAL navigation bar in a CGI Perl script?

Currently, I have a CGI page called Login.cgi. It features a form where I must input the correct password to be redirected to another page named Main.cgi. On this new page, my goal is to incorporate a HORIZONTAL menu containing options like UsersList, Logs ...

html

Problem with border and background color in JavaFX 8 CSS buttons

Attempting to replicate a Fallout 4 button style using CSS, I have successfully implemented simple background-color and border properties. However, there seems to be an issue with the border not covering the entire button. A part of the background is protr ...

javacssbuttonjavafx

Press anywhere outside the container to conceal it along with the button

Utilizing an Angular directive to hide div elements when the user interacts outside of them has been effective. However, there is a specific issue that arises when clicking outside of a div on a button that toggles the visibility of the div. The 'ang ...

javascriptcssangularjshtml

Angular is unable to iterate through a collection of ElementRef instances

My list of ElementRef contains all my inputs, but adding listeners to them seems to indicate that textInputs is empty even though it's not. @ViewChildren('text_input') textInputs!: QueryList<ElementRef>; ngAfterViewInit(): void { ...

htmlangulartypescriptelementref

What is causing Mag Pagination and Mag Sort to malfunction?

Struggling to incorporate pagination and sorting in the frontend after retrieving data from nodejs. Trying to follow a guide per this link: here While attempting to apply a similar logic, there seems to be an issue as it's not functioning correctly. ...

javascripthtmlcssangular

Determining the display of an element based on its content in comparison to others

In organizing user profiles, I have divided the information into four elements displayed as CSS tabs. These elements are essential parts of each user's profile. The four elements are structured as follows: Element 1: About Me Element 2: Interests ...

phpcss

`How can I effectively utilize the :root pseudo class in my CSS?`

When I apply CSS to the root (html element) to determine the display style of a webpage, there always seems to be some space around the content even when setting margin and padding to 0px. However, if I use the body element instead of the root(html eleme ...

htmlcss

Instructions on displaying a dropdown menu within a datatable for users to choose the desired amount of rows to be shown on the page

I need assistance with displaying a dropdown menu that allows users to select a number from the options list. Once selected, that number of rows should be displayed accordingly. Currently, everything is working perfectly except for the fact that the dropdo ...

jqueryhtml

Utilizing BEM Class Names in React

How can I utilize the Post component in a way that assigns unique classes to new and old posts following BEM recommendations? Assign a unique className to every element Avoid cascading dependencies like (.posts-new post or .posts-old post) Each component ...

javascriptcssreactjs