EDIT: The background is simply an image & the section where I place the image is the one I have given
My webpage currently looks like this and I have indicated where I want the button, however I'm very new to coding in general and not sure how to achieve this.
Picture of website page:
This is my html code, very simple just needed to add the button
<section class="slide kenBurns">
<div class="content">
<div class="container">
<div><p class="ae-2">
</p></div>
<div class="wrap">
<div class="fix-7-12">
<!-- <h1 class="ae-1">Messes Make Memories</h1> -->
</div>
</div>
</div>
</div>
<img
src="assets/img/background/flood2.png"
width="1450"
height="850"
></img>
</section>
4 Answers
well, try this one code
<!DOCTYPE html>
<html>
<head>
<style>
.img {
width:100%;
height: auto;
top:0;
left:0;
position: relative;
z-index: 1;
}
.anybutton {
top:11%;
left:55%;
width:100px;
height:40px;
position: absolute;
z-index: 2;
background: orange;
}
</style>
</head>
<body style="text-align:center; margin: 0px;">
<div class="mycenter" id="">
<img src="assets/img/background/flood2.png" class="img" id="img" />
<input type="button" class="anybutton" id="myab" value="Right Here" />
</div>
</body>
</html>There 2 types of a buttons There the real button. Its used to fire an event for JavaScript. It works as in the example below and can by styled like below. You can insert it whereever you want.
button {
background-color: blue;
width: 200px;
font-size: 20px;
padding: 10px;
border-radius: 5px;
border: 3px solid yellow;
color: white;
cursor: pointer;
}<button id="ID">I'm a Button</button>Then there is the Pseudo-Button. Its not a real button. It is just a div box to style a link like a button:
.button {
background-color: blue;
width: 200px;
font-size: 20px;
padding: 10px;
border-radius: 5px;
border: 3px solid yellow;
color: white;
text-align: center;
}<a href=""><div class="button">I'm a Button</div></a>- Insert a
<button>tag in the same parent div which has code for this particular section
Set the css property of the parent element to
position: relativeSet the css property for the
<button>toposition: absolute
Lastly, use
top : 40px;
right : 100px;
for the css property of button tag
Note: Change the value of top and right property as per convenience.
.button {
border: none;
padding: 15px 42px;
border-radius: 15px;
color: magenta;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 8px 10px;
cursor: pointer;
}
.button3 {
background-color: pink;
left: 50%;
position: absolute;
}<button class="button button3">Button 3</button> .button {
border: none;
padding: 15px 42px;
border-radius: 15px;
color: magenta;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 8px 10px;
cursor: pointer;
}
.button3 {
background-color: pink;
left: 50%;
position: absolute;
}
