Mick, Thanks. And sorry I forgot to mention that I've solved the problem with a similarly different approach.
Best, Don Li On Jun 8, 8:20 am, Michael Kolaski <[email protected]> wrote: > 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/whichwillproducethe > > 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]
