анимация кнопки при наведении курсора

saint_12 · December 6, 2011

Здравствуйте, господа программисты и верстальщики! Хочу обратиться к вам с такой просьбой: у меня есть html- страничка, сделанная по шаблону. В числе прочего там присутствует вертикальное меню из 10 кнопок, оформленное с помощью background-image в css. Поверьте, я перелопатил в гугле достаточно, но не смог приспособить программный код под свои задачи и в результате чувствую себя чайником, в котором вся вода выкипела и он вот-вот сгорит на плите нафик... Зарегился я недавно и в соответствующем разделе для лодырей и.т.д у меня пока нет возможности создать нужную тему... .

Поэтому, если кому-то не совсем влом, помогите пожалуйста разобраться с этим злосчастным вертикальным меню...

вид шаблона:

Кнопки должны быть серыми, а при наведении курсора должны становиться зелеными, как первая кнопка на шаблоне.

HTML-код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>????</title>




</head>
<link rel="stylesheet" type="text/css" a href="style.css">
<body>

<div id="main">
	<div id="header">

    <div id="header_text">

        		<div id="header1_text">Slogan goes here</div><!--header1_text-->
					<div id="header2_text">Company Name</div><!--header2_text-->

        </div><!--header_text-->

    </div><!--header-->




<div id="menu_left">
<div id="menu_left1">

<div id="buttons">
		<div id="buttons1">    
   			<div id="buttons1_text"><b>Warmheartedness</b></div>
        </div>

        <div id="buttons2">    
   			<div id="buttons2_text"><b>Warmheartedness</b></div>
            </div>

            <div id="buttons3">    
   			<div id="buttons3_text"><b>Solutions</b></div>
            </div>

            <div id="buttons4">    
   			<div id="buttons4_text"><b>Our Clients</b></div>
            </div>

            <div id="buttons5">    
   			<div id="buttons5_text"><b>Contacts</b></div>
            </div>

            <div id="buttons6">    
   			<div id="buttons6_text"><b>News</b></div>
            </div>

            <div id="buttons7">    
   			<div id="buttons7_text"><b>Offers</b></div>
            </div>

            <div id="buttons8">    
   			<div id="buttons8_text"><b>Career Center</b></div>
            </div>

            <div id="buttons9">    
   			<div id="buttons9_text"><b>Offers</b></div>
            </div>

            <div id="buttons10">    
   			<div id="buttons10_text"><b>Services</b></div>
            </div>

</div><!--buttons-->

        </div><!--menu_left1-->

<div id="footer"></div><!--footer-->

</div><!--menu_left-->

<div id="menu_right">

<div id="button_top_reklama"></div>

<div id="reklama4"></div>

<div id="ssulka4"><a href="http://www.google.ru/"><b>Ut vitae purus</b></a></div>

<div id="button_top_reklama1"></div>

<div id="menu_right_text"><b>Ut vitae purus.</b> <br>Integer wisi a mi <br> blandit cursus.<br>Aliquam erat volutpa<br>Donec aliquet quam<br> amet uma. Donec </div>

<div id="reklama5"></div>

</div> <!--menu_right-->


<div id="content">
<div id="content_text">
<div id="content_text1">Welcome to</div>

<div id="content_text2"><b>Sed scelerisque convallis mauris</b></div>

<div id="content_text3"><b>Ut vitae purus.</b>Integer a wisi a mi blandit cursus. Aliquam erat volutpat.Donec <br>aliquet quam sit amet urna. 
Donec  vitae mauris.Donec Aliquett egestas arcu eget<br> augue.Duis id velit in turpis convallis aliquam.</div>


<div id="Horizontal_line1"></div>


<div id="content_text2"><b>Sed scelerisque convallis mauris</b></div>

<div id="content_text3"><b>Ut vitae purus.</b>Integer a wisi a mi blandit cursus. Aliquam erat volutpat.Donec <br>aliquet quam sit amet urna. 
Donec  vitae mauris.Donec Aliquett egestas arcu eget<br> augue.Duis id velit in turpis convallis aliquam.</div>


<div id="Horizontal_line1"></div>

<div id="content_text4"><b>Integer a wisi a mi blandit cursus</b></div>

<div id="reklama">
<div id="reklama1">
<div id="reklama2">
<div id="reklama3">

<div id="ssulka_3"><a href="http://www.google.ru/">Aliquet egestas</a>
</div><!--reklama3-->

</div><!--reklama2-->

</div><!--reklama1-->
<div id="ssulka_1"><a href="http://www.google.ru/">Aliquet egestas</a>


</div>

</div><!--reklama-->
<div id="ssulka_2"><a href="http://www.google.ru/">Aliquet egestas</a>

</div><!--content_text-->
</div><!--content-->







</div><!--main-->
</body>
</html>

а это css-код:

#main { width:800px;
		margin:  auto;
		}

#header {   width:800px;
			height:180px;
			background-image: url(images/logotip.jpg);
			background-color:#00CC66;}

#header1_text {font-family: Georgia, "Times New Roman", Times, serif;
				font-size:12px;
			    color:#7db35d;
				padding-top:80px;
				margin-left:440px;}


#header2_text {font-family: Tahoma;
				font-size:30px;
			    color:black;
				padding-top:0px;
				margin-left:415px;}


#menu_left1{width:82px;
			height:368px;
			/*float:left;*/
			background-color:green;

			background-image: url(images/full_left_bok.jpg);
			background-repeat:no-repeat;}

#menu_left {width:230px;
			height:368px;
			float:left;
			}


#buttons1 {width:128px;
		   height:30px;
		   float:left;
		   margin-top:45%;
		   margin-left:80px;
		   /*padding:50px;*/
		   background-image: url(images/button1_on.gif);
		  }

#buttons1_text {font-size:13px;
			    color:#7db35d;
				margin-top:9px;
				margin-left:23px;}


#buttons2 {width:130px;
		   height:30px;
		   float:left;
		   margin-top:1px;
		   margin-left:80px;
		   background-image: url(images/button1_off.gif);}


#buttons2_text {font-size:13px;
			    color:#565656;
				margin-top:9px;
				margin-left:24px;}

#buttons3 {width:130px;
		   height:30px;
		   float:left;
		   margin-top:0px;
		   margin-left:80px;
		   background-image: url(images/button1_off.gif);}


#buttons3_text {font-size:13px;
			    color:#565656;
				margin-top:9px;
				margin-left:33px;}

#buttons4 {width:130px;
		   height:30px;
		   float:left;
		   margin-top:0px;
		   margin-left:80px;
		   background-image: url(images/button1_off.gif);}


#buttons4_text {font-size:13px;
			    color:#565656;
				margin-top:9px;
				margin-left:33px;}


#buttons5 {width:130px;
		   height:30px;
		   float:left;
		   margin-top:0px;
		   margin-left:80px;
		   background-image: url(images/button1_off.gif);}


#buttons5_text {font-size:13px;
			    color:#565656;
				margin-top:9px;
				margin-left:33px;}

#buttons6 {width:130px;
		   height:30px;
		   float:left;
		    margin-top:0px;
		   margin-left:80px;
		   background-image: url(images/button1_off.gif);}


#buttons6_text {font-size:13px;
			    color:#565656;
				margin-top:9px;
				margin-left:33px;}

#buttons7 {width:130px;
		   height:30px;
		   float:left;
		    margin-top:0px;
		   margin-left:80px;
		   background-image: url(images/button1_off.gif);}


#buttons7_text {font-size:13px;
			    color:#565656;
				margin-top:9px;
				margin-left:33px;}


#buttons8 {width:130px;
		   height:30px;
		   float:left;
		    margin-top:0px;
		   margin-left:80px;
		   background-image: url(images/button1_off.gif);}


#buttons8_text {font-size:13px;
			    color:#565656;
				margin-top:9px;
				margin-left:33px;}


#buttons9 {width:130px;
		   height:30px;
		   float:left;
		   margin:90px 0 0 68px;
		   margin-top:0px;
		   margin-left:80px;
		   background-image: url(images/button1_off.gif);}


#buttons9_text {font-size:13px;
			    color:#565656;
				margin-top:9px;
				margin-left:33px;}


#buttons10 {width:130px;
		   height:30px;
		   float:left;
		    margin-top:0px;
		   margin-left:80px;
		   background-image: url(images/button1_off.gif);}


#buttons10_text {font-size:13px;
			    color:#565656;
				margin-top:9px;
				margin-left:33px;}


#menu_right {width:165px;
			height:429px;
			float:right;
			}

#content {width:399px;
			height:370px;
			margin-top:0px;
			margin-left:230px;
			}

#footer {width:230px;
			height:27px;
			/*margin-top:415px;*/
			background-image: url(images/lf2.gif);
			background-repeat:no-repeat;}


#content_text {font-family:Arial, Helvetica, sans-serif;
			   font-size:24px;
			   margin-left:15px;}

#content_text2 {font-family:Tahoma;
				font-size:12px;
			    color:#6d9e4e;
				padding-top:10px;
				margin-left:4px;}


#content_text3 {font-family:Tahoma;
				font-size:10px;
			    color:black;
				padding-top:10px;
				margin-left:4px;}

#Horizontal_line1 {width:378px;
				   height:3px;
				   background-image: url(images/horizontal.jpg);
				   background-repeat:no-repeat;
				   margin-top:10px;
				   margin-left:4px;}


#content_text4 {font-family:Tahoma;
				font-size:12px;
			    color:#5a5a5a;
				padding-top:10px;
				margin-left:7px;}


#reklama1 {width:76px;
		   height:106px;
		   margin-top:5px; 
		   margin-left:20px;
		   background-image: url(images/reklama1.jpg);
		   background-repeat:no-repeat;}

#ssulka_1 {font-size:11px;
		   font-family:Tahoma;
		    padding-top:1px;
		    margin-left:0px;}

#ssulka_2 {font-size:11px;
		   font-family:Tahoma;
		    margin-left:148px;}

#ssulka_3 {font-size:11px;
		   font-family:Tahoma;
		   padding-top:106px; 
		    margin-left:0px;}

#ssulka4 { font-family:Tahoma;
			font-size:10px;
		    padding-top:5px; 
		    padding-left:42px;
			color:#00FF00;}


#reklama2 {width:76px;
		   height:105px;
		   margin-left:125px;
		   background-image: url(images/reklama2.jpg);}

#reklama3 {width:76px;
		   height:106px;
		   margin-top:5px; 
		   margin-left:137px;
		   background-image: url(images/reklama3.jpg);
		   background-repeat:no-repeat;}

#reklama4 {width:96px;
		   height:124px;
		   margin-top:7%; 
		   margin-left:19%;
		   background-image: url(images/reklama4.jpg);
		   background-repeat:no-repeat;}

#reklama5 {width:95px;
		   height:71px;
		   margin-top:5%; 
		   margin-left:19%;
		   background-image: url(images/reklama5.jpg);
		   background-repeat:no-repeat;}

#content a{
 color:#5a5a5a;
}

#menu_right a{
 color:#5a5a5a;
}

#button_top_reklama {width:152px;
		   			 height:28px;
		  			 background-image: url(images/button_top_reklama.jpg);
		  			 background-repeat:no-repeat;}


#button_top_reklama1 {width:152px;
		   			 height:28px;
					 margin-top:6%;
		  			 background-image: url(images/button_top_reklama.jpg);
		  			 background-repeat:no-repeat;}


#menu_right_text {font-family:Tahoma;
				  font-size:10px;
			      color:#5a5a5a;
				  padding-left:20%;
				}

Sign In

анимация кнопки при наведении курсора

Question

saint_12

Link to comment

Share on other sites

0 answers to this question

Recommended Posts

Join the conversation

Обсуждения

Forums

Important Information