ChristopherBerman Posted August 21, 2020 Share Posted August 21, 2020 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> <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; } Link to comment
Solution jpeter Posted August 22, 2020 Solution Share Posted August 22, 2020 @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 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: jqtoGBvE9H.mp4 ChristopherBerman 1 Link to comment
ChristopherBerman Posted August 22, 2020 Author Share Posted August 22, 2020 Thank you! thank you! Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment