Jump to content

Centering "coded" button in code block

Go to solution Solved by VelocityMarketingGroup,

Recommended Posts

Hi. I have created a button with a hover dropdown but now I want to center the button in the code block. Does anyone know how to center a coded code in a code block...

Thanks, 

 

These are my codes: (CSS and HTML)

(CSS) -

/* drop down button */

.dropbtn {
  width: 310px;
  background-color: #234b2a;
  color: white;
  padding: 16px;
  font-size: 16px;
  border-color: white;
  border-width: 5px;
  border-style: solid;
  
  cursor: pointer;
  box-shadow: 0px 0px 10px 6px rgba(0,0,0,0.2);
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: white;
  min-width: 300px;
  padding: 5px;
  box-shadow: 3px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;

}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #89c23f;
 
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  background-color: #324d20;
}

/* end */

 

(HTML) - 

<div class="dropdown">
 <button class="dropbtn">Tree Removel</button>
  <div class="dropdown-content">
<p>Reasons to Consider Tree Removal</p>
    <ul style="text-align:justice;"> 
      <li>Diseased</li>
      <li>Hazardous</li>
      <li>Damaging to surrounding areas</li>
      <li>Dead</li>
    </ul>
    <a href ="/tree-removal">Learn More</a>
  </div>
</div>

 

 

Thanks,

 

 

code block.png

Link to comment
  • Replies 1
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.