Custom CSS: How to remove Underline from Floating button and more...

Site URL: https://www.nimeaariana.com

Hello!

I'm in the process of creating a floating button for my website, to redirect someone to email me to book an art or design consult. Essentially I have it produced now, finally! (Yay for me!) However, now I'm getting into "perfectionist mode" and I wonder if there's anyone that can help me figure the missing links to the code I need to sort out.

On my Home Page's Advanced Section I have:

<div id="book-artconsult">
  <a href="mailto:hello@nimeaariana.com?subject=Book%20an%20Art%20+%20Design%20Consult"> Book an Art + Design Consult </a>  
</div>

In my Custom CSS panel I have:

#book-artconsult a {
  display: inline-block;
    background: black;
    color: white;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    font-family: futura;
    border-radius: 25px;
    padding: 15px 30px;
    z-index: 99999;
    position: fixed;
    top: 88%;
    right: 3%; 
  }

What I want to do is:

1. Stop seeing an underline when hovering over the button.

2. Change the Colour of the Background instead on Hover.

3. Remove the button when on clicking the menu bar on mobile browsing.

Finally...

Maybe this isn't technically a button and therefore I'd love some help figuring out a true button for this kind of application!

Thank you!

Nimea

On 9/13/2022 at 11:10 AM, bangank36 said:

Try adding to Home > Design > Custom Css

#book-artconsult a:hover {
  text-decoration: none;
}

 

Thank you! That worked well. I wonder if you have any tips for how to change the colour of the button or even text on hover as well?

Appreciate the help!

On 9/14/2022 at 10:49 PM, NimeaAriana said:

Thank you! That worked well. I wonder if you have any tips for how to change the colour of the button or even text on hover as well?

Appreciate the help!

Use this CSS code

div#book-artconsult a:hover {
    background-color: violet;
    color: black;
}