Hi Don
To get round the existing styling change the CSS to this:
a.button {
background: url(images/button.png) no-repeat center;
color: #fff;
display:block;
font-family: Helvetica Neue,Arial,Helvetica,sans-serif;
font-size:18px;
font-weight: bold;
height: 35px;
line-height:35px;
margin-top: 6px;
text-align: center;
text-decoration: none;
width:154px;
}
a:hover.button {
/* style as necessary */
letter-spacing: 1px;
}
Your HTML needs to look something like this (I assume you want a download
button for students as well):
<p align="center"><br><br>
Students <a class="button" href="
http://www.knowledgenotebook.com/index_s.html";>click here</a><br>
<span style="font-family:'Comic Sans MS';font-size:20px">Everyone
else - <a class="button"
href="http://www.knowledgenotebook.com/index_b.html";>click
here</a></span>
</p>
Also, don't forget to upload the image - I was unable to view it in the path
in your code.
HTH
Cheers,
Mick
On 6 June 2011 21:45, justaguy <[email protected]> wrote:
> Mick,
>
> I appreciate it. But sorry I forgot to mention that this element
> would use an existing CSS setting, so, when I simply implemented your
> solution, it does not look as intended, pls take a look,
> http://www.knowledgenotebook.com/index_dev.html
>
> How could we fix it?
>
> Many thanks.
>
> Don
>
> On Jun 6, 9:26 am, Michael Kolaski <[email protected]> wrote:
> > Hi Don
> >
> > Your HTML will be:
> >
> > <a href="#" class="button" title="Download">Download</a>
> >
> > ...and your CSS (remember to change the link to the image) will look
> > something like
> >
> > a.button {
> > background: url(button.png) no-repeat center;
> > color: #fff;
> > display:block;
> > height: 35px;
> > padding-top: 16px;
> > text-align: center;
> > text-decoration: none;
> > width:154px;
> >
> > }
> >
> > a:hover.button {
> > /* style as necessary */
> > font-weight:bold;
> >
> > }
> >
> > HTH
> >
> > Cheers,
> > Mick
> >
> > On 06/06/2011 06:21, justaguy wrote:
> >
> > > Mick,
> >
> > > I can read CSS but not create some fancy one, could you be more
> > > specific, when I view the CSS code for your previous link (it has tons
> > > of code), so, if the following can be done with fewer lines of CSS
> > > code, it would be wonderful. btw, I'm simplifying my software as
> > > well... :)
> >
> > > Thanks in advance.
> >
> > > Don
> >
> > > On May 30, 11:10 am, Michael Kolaski<[email protected]> wrote:
> > >> Hi Don
> >
> > >> I removed the text from your existing button:
> http://dl.dropbox.com/u/516178/button.png
> >
> > >> All you need to do now is make each "button" link into a regular text
> link
> > >> and then in your CSS, remove the underline and set button.png as your
> > >> background-image
> >
> > >> HTH
> >
> > >> Cheers,
> > >> Mick
> >
> > >> On 27 May 2011 19:24, justaguy<[email protected]> wrote:
> >
> > >>> Mick,
> > >>> What you provide is interesting. However, the shape can't be created
> > >>> to be exactly as the one I have. But I could probably create two
> > >>> identical ones and get rid of the current one instead.
> > >>> Your tool is neat.
> > >>> Don
> > >>> On May 27, 5:13 am, Michael Kolaski<[email protected]> wrote:
> > >>>> They're using an image - if you want to use CSS then have a look
> > >>> athttp://css-tricks.com/examples/ButtonMaker/whichwillproduce the
> code
> > >>>> for you.
> > >>>> HTH
> > >>>> Cheers,
> > >>>> Mick
> > >>>> --
> > >>>> Pinnacle Web Designhttp://www.pinnaclewebdesign.co.uk|
> > >>>http://twitter.com/pinnacleweb
> > >>>> On 27/05/2011 03:11, justaguy wrote:
> > >>>>> Hi,
> > >>>>> I need a button that reads [Test Drive] similar to the [Download
> Now]
> > >>>>> athttp://lnkd.in/6-G2XU
> > >>>>> Could anyone help? Would greatly appreciate it.
> > >>> --
> > >>> --
> > >>> You received this because you are subscribed to the "Design the Web
> with
> > >>> CSS" at Google groups.
> > >>> To post: [email protected]
> > >>> To unsubscribe: [email protected]
>
> --
> --
> You received this because you are subscribed to the "Design the Web with
> CSS" at Google groups.
> To post: [email protected]
> To unsubscribe: [email protected]
>
--
--
You received this because you are subscribed to the "Design the Web with CSS"
at Google groups.
To post: [email protected]
To unsubscribe: [email protected]
