Efect buton.

Mr.BuLLaNZor · 20 Jan 2013, 19:41

Salutare , am nevoie de niste efecte pentru 2 butoane , mai exact cand pun mouse-ul pe buton sa apara/dispara sa zicem , asta-i doar un exemplu , am cautat pe google si nu prea am gasit , poate n-am cautat ce trebuie :-??

Happy? · 20 Jan 2013, 19:53

Buton in ce ? Pentru o pagina html ? php ? da si tu cateva detalii.

Mr.BuLLaNZor · 20 Jan 2013, 20:49

Code: Select all

Buton in ce ? Pentru o pagina html ? php ? da si tu cateva detalii.

buton pentru un index (html) :)

g00gLe. · 20 Jan 2013, 20:54

nu stiu exact la ce te referi cand zici ca apare si dispare :-? dar http://www.practichtml.go.ro/lessons/htmlbutoane.html poate te ajuta

Mr.BuLLaNZor · 20 Jan 2013, 21:00

Code: Select all

nu stiu exact la ce te referi cand zici ca apare si dispare :-? dar http://www.practichtml.go.ro/lessons/htmlbutoane.html poate te ajuta

uita-te atent pe site-ul acesta cand apesi pe HTML TESTE de exemplu , vezi acel "efect" ? asa ceva m-ar interesa.

21 Jan 2013, 00:07

Fi atent:

Deci ai asa in html

Code: Select all

<div class="buton">div</div>

In CSS vei avea asa:

Code: Select all

.buton{
background: #fff
}
.buton:hover{
background: #212121
}

Daca faci asa vei avea culoarea alba cand nu este mouse-ul pe buton si culoarea neagra cand il pui pe buton.
Eu ti-am dat un exemplu sper ca te descurci sa modifici/creezi tu butonul tau.
Daca vrei sa ai doar doua imagini la backgound pui asa : url(./folderul unde ai imaginea/imaginea.png/jpg/gif)

Happy? · 21 Jan 2013, 02:28

Fiind vorba de hover poti sa-l faci direct in fisierul html, asa:

Code: Select all


<img src="imagine1.png" onmouseover="this.src='imagine2.png'" onmouseout="this.src='imagine1.png'">

imagine1.png este cea normala iar imagine2.png este hover-ul, onmouse.

Mr.BuLLaNZor · 21 Jan 2013, 11:31

se pare ca m-am exprimat gresit , uitati html-ul index-ului:

| Afiseaza codul

<html>
<head>
<title>Black_Texture___Ray</title>
<style type="text/css">
<!--
body {
background-color: 000000;
}
.style2 {
font-size: 12px;
color: 0090ff;
font-weight: bold;
}
.style4 {
color: 42444d;
font-size: 12px;
}
-->
</style>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
</head>
<center>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (Black_Texture___Ray.jpg) -->
<table id="Table_01" width="801" height="701" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="9">
			<img src="images/Black_Texture___Ray_01.png" width="800" height="184" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="184" alt=""></td>
	</tr>
	<tr>
		<td rowspan="8">
			<img src="images/Black_Texture___Ray_02.png" width="140" height="516" alt=""></td>
		<td colspan="6">
			<img src="images/Black_Texture___Ray_03.png" width="464" height="129" alt=""></td>
		<td colspan="2" rowspan="3">
			<img src="images/Black_Texture___Ray_04.png" width="196" height="180" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="129" alt=""></td>
	</tr>
	<tr>
		<td colspan="6">
			<img src="images/Black_Texture___Ray_05.png" width="464" height="30" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="30" alt=""></td>
	</tr>
	<tr>
		<td rowspan="6">
			<img src="images/Black_Texture___Ray_06.png" width="43" height="357" alt=""></td>
		<td colspan="2" rowspan="2">
			<img src="images/Black_Texture___Ray_07.png" width="186" height="153" alt=""></td>
		<td colspan="3">
			<img src="images/Black_Texture___Ray_08.png" width="235" height="21" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="21" alt=""></td>
	</tr>
	<tr>
		<td rowspan="3">
			<img src="images/Black_Texture___Ray_09.png" width="23" height="198" alt=""></td>
		<td colspan="3" rowspan="2">
			<img src="images/Black_Texture___Ray_10.png" width="224" height="148" alt=""></td>
		<td rowspan="5">
			<img src="images/Black_Texture___Ray_11.png" width="184" height="336" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="132" alt=""></td>
	</tr>
	<tr>
		<td colspan="2" rowspan="2">
			<img src="images/Black_Texture___Ray_12.png" width="186" height="66" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="16" alt=""></td>
	</tr>
	<tr>
		<td colspan="3">
			<img src="images/Black_Texture___Ray_13.png" width="224" height="50" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="50" alt=""></td>
	</tr>
	<tr>
		<td rowspan="2">
			<img src="images/Black_Texture___Ray_14.png" width="42" height="138" alt=""></td>
		<td colspan="3">
			<img src="images/Black_Texture___Ray_15.png" width="324" height="68" alt=""></td>
		<td colspan="2" rowspan="2">
			<img src="images/Black_Texture___Ray_16.png" width="67" height="138" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="68" alt=""></td>
	</tr>
	<tr>
		<td colspan="3">
			<img src="images/Black_Texture___Ray_17.png" width="324" height="70" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="70" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/spacer.gif" width="140" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="43" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="42" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="144" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="23" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="157" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="55" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="12" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="184" height="1" alt=""></td>
		<td></td>
	</tr>
</table>
</center>
<!-- End Save for Web Slices -->
</body>
</html>

Butoanele fiind :

Black_Texture___Ray_07 si Black_Texture___Ray_10.

As vrea daca se poate cineva sa imi adauge efectul.

Efect buton.

Who is online