Jump to content

Need help with a button code

Recommended Posts

Hey! - made a HTML Code for 2 buttons next to each other - i´m trying to get one of the buttons to stay solid and 1 to be outlined - what i`m having difficulity with is finding out what CSS code to target it with because they are  inn the same code block so i can`t target a spesfic code block i need to use "child" or something , i`m not sure - anyone got a clue?  Codes and images are below:

This is the HTML code:

  <a class="button cta-button" href="https://www.elevated.no/priser">Se Priser</a>
&nbsp;
&nbsp;  
&nbsp;  
 
  <a class="button cta-button" href="https://www.elevated.no/tjenester">Kom i gang</a>

 

And this is the CSS Code

 

.button  {
  border: 2px solid #2cd4d9;
  border-radius: 50px;
  background: #2cd4d9;
  display: inline-block;
  font-size: 15px;
  font-weight: 500;
  text-align: center;
  padding: 15px 20px;
  width: 103px;
  color: #000080
    
}
.button:hover  {
    background: none;
    color: #FFF;
    opacity: 1 !important;
    transition: 0.5s !important;

}

618858803_ScreenShot2020-08-21at15_27_15.thumb.png.76051848d9397d42b1fbb31e4c3875ca.png1615230888_ScreenShot2020-08-21at15_27_21.thumb.png.4ad58417c3873b6e1f13a111f2e40000.png

Link to comment
  • Replies 2
  • Views 925
  • Created
  • Last Reply

@ChristopherBerman You can use the following code below. 

HTML

  • Added a cta-button--outline class to the second button to style it different from the default, which is solid
  • I removed the &nbsp; and used CSS margin to space the buttons apart
<a class="button cta-button" href="https://www.elevated.no/priser">Se Priser</a>
<a class="button cta-button cta-button--outline" href="https://www.elevated.no/tjenester">Kom i gang</a>


CSS

.button  {
  border: 2px solid #2cd4d9;
  border-radius: 50px;
  background: #2cd4d9;
  display: inline-block;
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  text-align: center;
  padding: 15px 20px;
  width: 103px;
  color: #000080
}

.button:hover,
.button:focus{
    background: none;
    color: #FFF;
    opacity: 1 !important;
    transition: 0.5s !important;
}

/* Space buttons apart if they're next to each other */
.button + .button {
  margin-left: 1rem;
}

/* Create a class specific for buttons that are outlined */
.cta-button--outline {
  border: 2px solid #2cd4d9;
  color: white;
  background: none;
}

.cta-button--outline:hover,
.cta-button--outline:focus {
  background: #2cd4d9;
}

Here's what it produces:

Full stack developer who loves helping people out with anything web related. If you'd like to support me, buy me a coffee!

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.