Welcome to WebmasterWorld Guest from 54.197.116.116

Forum Moderators: not2easy

Message Too Old, No Replies

Stylising a text link

Adding CSS style to a link

   
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
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?
3:14 pm on Apr 3, 2014 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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>
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