css design übertragen

[pad8626]

geht mal auf www.pad8626.de/index2.php

ich habe ein button ähnliches design für meine div tags entworfen (siehe links) kann ich das auch auf meine formular buttons übertrgagen ?? wenn ja wie??

 

[dkdenz]

Die gleichen Werte hier rein:

input {
   ...
   ...
   ...
}

 

[pad8626]

ich vergaß den css-code hinzu zu fügen für die div-tag buttons

.Button a,a:hover,v{
	width:90px;
	font-weight:bold;
	color: #ffffff;
	background-color: #000000;
	border-width: 3px;
	border-style: solid;
	text-align: center;
	text-decoration: none;
	vertical-align: middle;
	padding:1px 3px 1px 3px;
	display:block;
	margin: 3px;
}

.Button a,v{
	border-bottom-color: #969696;
	border-left-color: #d5d5d5;
	border-top-color:#d5d5d5;
	border-right-color: #969696;
}

.Button a:hover{
	border-top-color: #969696;
	border-right-color: #d5d5d5;
	border-bottom-color:#d5d5d5;
	border-left-color: #969696;
}

weil ich weiß nicht ob das was macht wegen dem a , a:hover und v

 

[pad8626]

okay das design ist kein problem rüber zu bekommen aber den effekt weiß ich nicht wie ich den wieder hinbekommen so das wenn man drüber fährt sich auch was ändert da bräuchte ich dann doch noch mal hilfe

 

[dkdenz]

Ich habe keine Ahnung ob das funktioniert, aber probier's mal aus:

input {
   ...
   ...
   ...
}
input:hover {
   ...
   ...
   ...
}

Im IE bringt das aber nix...

 

[pad8626]

ja das klappt sogar ^^ hab es die ganze zeit mit input a:hover probiert aber nicht mit input:hover

bringt zwar im ie nix im ie ist aber der normale klick effekt noch da

thx

 

[bine]

Solange der IE das noch nicht kann, hast Du die Möglichkeit ein Javascript einzusetzen.
Schau mal hier:
http://www.css-technik.de/details/76/9/CSS-Snippets.htm

[edit: auf deinen Code übertragen müsste das wie folgt lauten:

<script type="text/javascript">
<!--
function NewBorder(obj,bbottom,bleft,btop,bright)
{
if(obj.style)
{
obj.style.borderBottom=bbottom; //Border-Attribut bottom
obj.style.borderLeft=bleft; //Border-Attribut left
obj.style.borderTop=btop; //Border-Attribut top
obj.style.borderRight=bright; //Border-Attribut right
}
}
//-->
</script>

<button type="submit" name="senden" class="Button" OnMouseOver="NewBorder(this,'3px solid #d5d5d5','3px solid #969696','3px solid #969696','3px solid #d5d5d5')" OnMouseOut="NewBorder(this,'3px solid #969696','3px solid #d5d5d5','3px solid #969696','3px solid #969696')" value="Senden">Senden</button>

Was mich hierbei seitens der Javascript Profis interessiert ist die Frage wie kürzt man die Schreibweise noch ab? Man muß doch sicher nicht 3 x 3px border solid blablah da hinschreiben!?

 

[pad8626]

hab diese technik schon mal verwendet aber wirklich kürzer gestalten kannst du das nicht das halt der nachteil