CODEWITHSUNDEEP
javascripthtmlcss
troxie
troxie

Reputation: 21

Issues with Hovering Button

I'm trying to create a button that hovers over the content of my web page. How am I able to create this function?

This is the button I'm working with 

.button {
    background-color: red;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}
<div class="button">Back</div>

Upvotes: 0

Views: 42

Answers (2)

Jaikant Nirala
Jaikant Nirala

Reputation: 1

You can use button that hovers over the content

.button:hover {
    background-color: green;
}

and hover on content

.btn-holder:hover .button {
    background-color: green;
}

Upvotes: 0

Mohammad Usman
Mohammad Usman

Reputation: 39322

You can create a full width overlay that will cover your entire page, and make your button center align inside it.

.btn-holder {
  background: rgba(255, 255, 255, 0.5);
  position: fixed;
  z-index: 10;
  bottom: 0;
  right: 0;
  left: 0;
  top: 0;
}
.button {
  transform: translate(-50%, -50%);
  background-color: red;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  position: absolute;
  cursor: pointer;
  left: 50%;
  top: 50%;
}
<p>Lorem ipsum dolor site amet Lorem ipsum dolor site amet Lorem ipsum dolor site amet Lorem ipsum dolor site amet Lorem ipsum dolor site amet Lorem ipsum dolor site amet Lorem ipsum dolor site amet Lorem ipsum dolor site amet Lorem ipsum dolor site amet</p>
<p>Lorem ipsum dolor site amet Lorem ipsum dolor site amet Lorem ipsum dolor site amet Lorem ipsum dolor site amet Lorem ipsum dolor site amet Lorem ipsum dolor site amet Lorem ipsum dolor site amet Lorem ipsum dolor site amet Lorem ipsum dolor site amet</p>
<p>Lorem ipsum dolor site amet Lorem ipsum dolor site amet Lorem ipsum dolor site amet Lorem ipsum dolor site amet Lorem ipsum dolor site amet Lorem ipsum dolor site amet Lorem ipsum dolor site amet Lorem ipsum dolor site amet Lorem ipsum dolor site amet</p>
<p>Lorem ipsum dolor site amet Lorem ipsum dolor site amet Lorem ipsum dolor site amet Lorem ipsum dolor site amet Lorem ipsum dolor site amet Lorem ipsum dolor site amet Lorem ipsum dolor site amet Lorem ipsum dolor site amet Lorem ipsum dolor site amet</p>
<div class="btn-holder">
  <div class="button">Back</div>
</div>

Upvotes: 2

Related Questions