Stylising a text link

Forum Moderators: not2easy

Message Too Old, No Replies

Stylising a text link

Adding CSS style to a link

SteveHi

12:52 am on Apr 3, 2014 (gmt 0)

Hello

I have the following in my <head> tags:

<style type="text/css">

form button {
 background:none;
 border:none;
 color:#BD2CBB;
 text-decoration:none;
 cursor:pointer;
 outline:none;

 a:link {background: #BD2CBB; text-decoration: none;}
 a:visited {background: #BD2CBB; text-decoration: none;} 
 a:hover {text-decoration: underline; color: #BD2CBB;}
 a:active {background: #BD2CBB; text-decoration: none;}
}
</style>

and this text-link in my HTML:

<input id="submitlink" type="text" name="Email" />
<button type="submit">Request password</button>

When the mouse passes over the text 'Request password', I would like the text to be underlined in the colour #BD2CBB.

How would I do that, please?

Thank you.

Steve H

brandozz

1:44 pm on Apr 3, 2014 (gmt 0)

You have the closing bracket for the "form button" styles in the wrong place, it should be before the a:link styles and do you have the input and button wrapped in a form?

rainborick

3:14 pm on Apr 3, 2014 (gmt 0)

brandozz is right that your CSS has errors. Try:


<style type="text/css">

form button {
background:none;
border:none;
color:#BD2CBB;
text-decoration:none;
cursor:pointer;
outline:none;
}

form button:hover {
text-decoration:underline;
}

</style>

SteveHi

3:25 pm on Apr 3, 2014 (gmt 0)

Hello brandozz and rainborick

Yes, the input and button and in a 'lost password' <form></form>.

I have tried the code that rainborick kindly submitted and IT WORKS!

Thank you. I'm ever so grateful.

Thanks again to you both!

Steve