CODEWITHSUNDEEP
htmlcssclassbuttonhyperlink
user1769312
user1769312

Reputation: 11

How do I link a custom CSS designed button (class) using <input>?

I'm currently at a loss concerning this issue. What I'm making is a WYSIWYG editor (much like the one I am using right now) and the problem is the buttons on top. I have made a CSS class of their layout:

.test {
    background-color:#d0d0d0;
    color:#000000;
    font-family:arial;
    font-size:12px;
    font-weight:bold;
    padding:2px 7px;
    text-decoration: none;
}

.test:hover  {
    padding: 1px 6px;
    background-color:#789dfa;
    border: 1px solid #485ae0;
}

The layout works fine but I am unable to find a proper way to link the class. Take this for example(ignore the JavaScript): 

<input type="submit" class="test" value="B" onClick="texta(text,'b','b')" onmouseup="text.focus();">

Problem is that any buttons (<button>, <type="submit> etc) tend to deform the original design, giving it 3-dimensional look and generally making it look more like a button.

My question is, how do I work around this? I've tried to link the class in several different ways but it just won't work.

Picture:

button results

Upvotes: 1

Views: 163

Answers (2)

Forty-Two
Forty-Two

Reputation: 7605

Tweaked your css just a bit

.test{
    background-color:#d0d0d0;
    border: 1px solid #f5f5f5;  //<--add this
    color:#000000;
    font-family:arial;
    font-size:12px;
    font-weight:bold;
    padding:2px 7px;
    text-decoration: none; 
}
.test:hover  {
    padding: 1px 6px;
    background-color:#789dfa;
    border: 1px solid #485ae0;
}​

Works on input or button elements Here's a FIDDLE with the result.

Upvotes: 0

circusdei
circusdei

Reputation: 1967

I usually go with:

html:

<div class="test"><a data-js="texta(text,'b','b')" href="http://someOtherLikeActionIfTheresNoJs"></a></div>

css:

.test {

    [ ... snipped your style ... ]

    position: relative;
}

.test a {
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
}

Upvotes: 2

Related Questions