CODEWITHSUNDEEP
htmlcss
Suraj Hazarika
Suraj Hazarika

Reputation: 667

custom different submit button in same css

Can I customize different submit button in the same css ? For example I would like a search image in search button but a normal submit for the sign-up page . Is is possible ?

Upvotes: 5

Views: 21336

Answers (4)

M T Head
M T Head

Reputation: 1290

Here is an example of how to do that.

<html><head>
<meta http-equiv="content-type" content="text/html; charset=windows-1252"><title>Title Here </title>
</head><body>
<style type="text/css">input[type=submit] {    padding:5px 15px;     background:#cccfe0;     color: #fff;    border:0 none;    cursor:pointer;    -webkit-border-radius: 5px;    border-radius: 5px; }.ButtonA {background-color:333E7B;border-radius:5px;border:5px solid #B7D96B;box-shadow:rgba(0,0,0,0.2) 0 1px 0 0;color:#8576AD;font-family:'Helvetica Neue',Arial,sans-serif;;font-size:16px;font-weight:700;height:32px;text-shadow:#E04644 0 1px 0background: FFD700;padding:4px 16px;text-decoration: none;}.ButtonA:hover{color: FDE47F;background: 7CCCE5;}.ButtonB {background-color:2E8B57;border-radius:5px;border:5px solid #6B8E23;box-shadow:rgba(0,0,0,0.2) 0 1px 0 0;color:#BDB76B;font-family:'Helvetica Neue',Arial,sans-serif;;font-size:16px;font-weight:700;height:32px;text-shadow:#3CB371 0 1px 0background: FFD700;padding:4px 16px;text-decoration: none;}.ButtonB:hover{color: 32CD32;background: FFFF00;}.ButtonC {background-color:5F9EA0;border-radius:5px;border:5px solid #008B8B;box-shadow:rgba(0,0,0,0.2) 0 1px 0 0;color:#7FFFD4;font-family:'Helvetica Neue',Arial,sans-serif;;font-size:16px;font-weight:700;height:32px;text-shadow:#5F9EA0 0 1px 0background: FFD700;padding:4px 16px;text-decoration: none;}.ButtonC:hover{color: 66CDAA;background: 008080;}.submit input     {     color: #000;     background: #ffa20f;     border: 2px outset #d7b9c9     } </style>

New Test Here
<button class="ButtonA" type="submit" name="Button" id="hiddenField" value="010000"> Admon  </button>&nbsp;
<button class="ButtonB" type="submit" name="Button" id="hiddenField" value="020000"> Reports</button>&nbsp;
<button class="ButtonC" type="submit" name="Button" id="hiddenField" value="030000"> Data   </button>&nbsp;
<table border="1"><form action="001_CrudScreen.py" method="post"></form>


</table></body></html>

Upvotes: 1

Nivas
Nivas

Reputation: 18344

Submit buttons are a type of buttons. By default a <input type="button"> or a <button> is a, well, button.

You can have a separate class for submit buttons and "normal" buttons (IE7+)

input[type=button]
input[type=submit]
button
button[type=submit]

See this question for more details

You can also have different ids:

<button type="submit" id="submitButton">Submit</button>
<button id="searchButton">Search</button>

And css

#submitButton
{
}

#searchButton
{
}

or classes

<button type="submit" class="submitButton">Submit</button>
<button class="searchButton">Search</button>

And css

.submitButton
{
}

.searchButton
{
}

Upvotes: 1

Spudley
Spudley

Reputation: 168685

Your question is quite hard to understand, but if I'm reading you correctly, what you want is to have two buttons which share the same basic styling, but which have some styling elements that are different?

In that case, the answer is yes, it's quite simple.

The easiest way is to give them multiple classes. So you would give them both the same class, which specifies the styles you want them to share, but also a secondary class name which styles the additional features. You can also use the ID or name instead of a second class.

<input type='button' id='signup-button' class='mybutton' value='Sign Up' />
<input type='button' id='search-button' class='mybutton' value='Search' />

.mybutton {
    /*shared styles go here*/
}

#signup-button {
   /*specific signup button styles here/*
}

#search-button {
   /*specific search button styles here/*
}

There's a number of other ways you can differentiate them in CSS, but that's probably the easiest.

Hope that helps.

Upvotes: 0

Pranay Rana
Pranay Rana

Reputation: 176896

In CSS its not possible to put condition like that but you can create two diffrent claases for that or you can make use of javascript/jquery to change image.

Upvotes: 2

Related Questions