Solved

CSS class for button

Posted on 2009-07-01
7
665 Views
Last Modified: 2012-05-07
My HTML designer has given me the following code for a button

[code]
<p class="gtb_btnImgGrp searchBtns">
   <a href="contact_add.html" class="gtb_btn">
      <span class="gtb_btnImgStart">&nbsp;</span>
             <span class="gtb_btnImgStretch">Search</span>
      <span class="gtb_btnImgEnd">&nbsp;</span>
   </a>
</p>
[/code]
following are the corresponding CSS classes
[code]
.gtb_form p.gtb_btnImgGrp span {display:inline; float:none; font-size:10px}
#searchPanel p.searchBtns {text-align: right}
gtb_btn {position:relative; width:auto;padding:1px 0; text-transform: uppercase; font-size: 10px !important; background: none; cursor: pointer;line-height:10px; overflow: visible; text-decoration:none; color:#333;display:inline-block}
.gtb_btn * {z-index: 100;/*margin: 1px 0;*/;}
.gtb_btn span {padding: 9px 5px;width: auto; white-space:no-wrap;line-height: 30px; font-size: 10px}
.gtb_btn img {border:0; display: block; position: absolute; top:8px;z-index:200}
/* Image Buttons */
.gtb_btn .gtb_btnImgStart, .gtb_btn .gtb_btnImgEnd {padding: 9px 2px}
.gtb_btn .gtb_btnImgStretch {background: url(../images/buttons.png) 0 -35px repeat-x; margin: auto -3px;}
.gtb_btn .gtb_btnImgStart {background: url(../images/buttons.png) 0 0 no-repeat}
.gtb_btn .gtb_btnImgEnd {background: url(../images/buttons.png) 0 -70px no-repeat}

[/code]

Now I need to create a button in my JSP with the same look and feel
<input type="button" value="Save" />

Can someone please let me know how to create a CSS class, which I can use to show the same look and feel to the user.  I want to do something like
<input type="button" value="Save"  class="saveClass" /> and have the same look an feel of the button

Thank you
0
Comment
Question by:ank9
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
7 Comments
 
LVL 29

Expert Comment

by:Badotz
ID: 24754484
Whay can't you use the same HTML for your button as that for your designer's button?
0
 

Author Comment

by:ank9
ID: 24759751
thanks for your reply.

How do I apply it to
<input type="button" >

I need a button so that I can capture onclick events
0
 

Author Comment

by:ank9
ID: 24759785
Actually, I'll be using a documentum control and not HTML button

<dmf:button name="abc" cssclass="ss" />

This control has an attribute called "cssclass" where I can specify my CSS class.
So I need just one CSS class although I am free to add other tags before or after dmf button tag.

0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:ank9
ID: 24759809
I tried this

<p class="gtb_btnImgGrp searchBtns">
   <a href="contact_add.html" class="gtb_btn">
      <span class="gtb_btnImgStart">&nbsp;</span>
             <span class="gtb_btnImgStretch"><input type="button" value="test" /></span>
      <span class="gtb_btnImgEnd">&nbsp;</span>
   </a>
</p>

but this puts a HTML button on top of the CSS generated look and feel
0
 

Accepted Solution

by:
anshul9189 earned 400 total points
ID: 24760076
If you are using documentum, then you can use <dmf:link> instead of <dmf:button> and use the same CSS classes.
0
 
LVL 29

Assisted Solution

by:Badotz
Badotz earned 100 total points
ID: 24760291
>>I need a button so that I can capture onclick events

Most HTML elements can have an "onclick" event, not just buttons.
0
 
LVL 29

Expert Comment

by:Badotz
ID: 24762577
No worries - glad to help.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
Dramatic changes are revolutionizing how we build and use technology. Every company is automating, digitizing, and modernizing operations. We need a better, more connected way to work together as teams so we can harness the insights from our system…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

752 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question