Hi
Chk this out
.button {
display: inline-block;
zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
*display: inline;
vertical-align: baseline;
margin: 0 2px;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .5em 2em .55em;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
behavior:url(border-radius.htc);
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button:hover {
text-decoration: none;
}
.button:active {
position: relative;
top: 1px;
}
On Jun 9, 12:15 am, justaguy <[email protected]> wrote:
> 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]
