Comment appliquer un style css sur un bouton

**Boubou2020** · 27/04/2016, 19h10

bonjour a tous

je suis débutant dans la monde dev web et surtout dans le monde css pour cela je reviens vers vous pour m'aider a une simple demande

j'explique j'ai une feuille qui contiens un bouton simple je veux appliquer ce format css sur ce bouton

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
.button {
   border-top: 1px solid #96d1f8;
   background: #65a9d7;
   background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
   background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
   background: -moz-linear-gradient(top, #3e779d, #65a9d7);
   background: -ms-linear-gradient(top, #3e779d, #65a9d7);
   background: -o-linear-gradient(top, #3e779d, #65a9d7);
   padding: 5px 10px;
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   border-radius: 10px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: #f0e7f0;
   font-size: 22px;
   font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif;
   text-decoration: none;
   vertical-align: middle;
   }
.button:hover {
   border-top-color: #28597a;
   background: #28597a;
   color: #ccc;
   }
.button:active {
   border-top-color: #3f6f8f;
   background: #3f6f8f;
   }

ci joint le code de le page

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
<html>
<head><? 
///////////////////////////////////////////////// 
// SADOK Miled
// Developpeur SAGEM TUNISIE COMMUNICATION
// miled.sadok@sagem.com 
// Copyright 2007 Sagem
//////////////////////////////////////////////// 
?>
<title>.::: Sagem Tunisie Communication :::.</title>
<? //include ('../fichiers_inc/css.css'); 
include ('../fichiers_inc/connex.php');
connection();
selection();
?>
<style type="text/css" media="screen">
/*====================================================
	- HTML Table Filter stylesheet
=====================================================*/
@import "../fichiers_inc/filtergrid.css";
@import "../fichiers_inc/css.css";
/*====================================================
	- General html elements
=====================================================*/
caption{ margin:10px 0 0 5px; padding:10px; text-align:left; }
.mytable{
	width:100%; font-size:12px;
	border:1px solid #ccc;
}
.th{ background-color:#003366; color:#FFF; padding:2px; border:1px solid #ccc; }
.td{ padding:2px; border-bottom:1px solid #ccc; border-right:1px solid #ccc; }
div.tools{ margin:5px; }
div.tools input{ background-color:#f4f4f4; border:2px outset #f4f4f4; margin:2px;  }
input { color:#000000 }
SELECT {
	COLOR: #000000; 
}
</style>
<script language="javascript" type="text/javascript" src="../fichiers_inc/actb.js"></script><!-- External script -->
<script language="javascript" type="text/javascript" src="../fichiers_inc/tablefilter.js"></script>
<STYLE>all.clsMenuItemNS {
	COLOR: #336699; CURSOR: hand; FONT: regular 12px Arial; TEXT-DECORATION: none; Z-INDEX: 50
}
.clsMenuItemIE {
	COLOR: #336699; CURSOR: hand; FONT: regular 12px Arial; TEXT-DECORATION: none; Z-INDEX: 50
}
#MainTable A:hover {
	COLOR: white
}
</STYLE>
<SCRIPT language=JavaScript>
var keepstatic=1 
var menucolor="../fichiers_images/bg_haut.gif" 
var submenuwidth=130 
</SCRIPT>
<script language="javascript">
<!--
function popup(url){
	wind = open (url, "", 'top=0, left=0, width=310, height=280, toolbar=no, scrollbars=no, resizable=no, color=#000066');
	}
	-->
</script>
</head>
<body topmargin="0" leftmargin="0" rightmargin="0">
<table width="100%" height="86" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
  <tr>
    <td width="87%" height="85" rowspan="2" align="center" valign="top"><img src="../fichiers_images/Img_Gch.gif" width="380" height="69"></td>
  </tr>
  <tr>
    <td height="16" align="right" valign="top" class="txt_body">&nbsp;&nbsp;</td>
  </tr>
</table>
<table width="100%"  height="20" border="0" align="center" cellpadding="0" cellspacing="0" background="../fichiers_images/bg_haut.gif">
  <tr><td>
<SCRIPT language=JavaScript src="../menu/barre.js"></SCRIPT>
<SCRIPT language=JavaScript src="../menu/text.js"></SCRIPT>
<SCRIPT language=JavaScript>showToolbar();</SCRIPT>
</td></tr></table>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr><td height="19" valign="top"><hr align="center" width="100%" size="1" color="#147CB3"></td></tr>
<tr><td height="20"><h3 align="center"> Liste des demandes  D'organisation de Mission</h3></td></tr>
<? //if ($statut=="directeur" || $statut=="RH" || $statut=="ASRH"){ ?>
	<tr>
	<td height="24">	  <form name="form1" method="post" action="">
	  <table width="606" border="0" align="center" cellpadding="0" cellspacing="0" class="txt_bod">
        <tr>
          <td width="71">Matricule : </td>
          <td width="106"><input name="matr" type="text" id="matr" size="10" maxlength="6"></td>
          <td width="167"><input name="Rch" type="submit"  id="Rch" value="Rechercher">            <!-- UF/Services :  --></td>
          <td width="182"><?php
// ----------------------------------------------------------------------------
// Liste uf / service
/* ----------------------------------------------------------------------------
$sql = "SELECT id_uf, uf_us FROM uf ";
$resultat = mssql_query($sql);
echo "<SELECT NAME='ufsr'>\n";
echo "&nbsp;<OPTION VALUE='$ufsr'></option>\n";
while ($enr = mssql_fetch_array($resultat)) {
  echo "<OPTION VALUE='".$enr[1]."'";
  if ($ufsr == $enr[1]) echo " SELECTED";
  echo ">".htmlspecialchars($enr[1])."</OPTION>\n";
}
echo "</SELECT>&nbsp;\n";*/
?></td>
          <td width="80">&nbsp;</td>
        </tr>
      </table>
      </form></td>
	</tr>
	<? //} ?>
	<table width="90%" border="0" cellspacing="0" cellpadding="0"  class="txt_body">
	</table>
	<tr>
	<td>
<table width="85%" id="table2" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" class="txt_body">
    <tr bordercolor="#CC0033" bgcolor="#0099FF">
    <td width="35" height="25" align="center" valign="middle">  N&deg;</td>
	<td width="62" align="center" valign="middle">Matricule</td>
	<td width="197" align="center" valign="middle">UF / Service</td>
	<td width="150" align="center" valign="middle">Pays de destination :</td>
    <!-- <td width="80" align="center" valign="middle" bgcolor="#003366">De</td>
    <td width="80" align="center" valign="middle" bgcolor="#003366">A</td> -->
    <td width="52" align="center" valign="middle">Nbre de jours</td>
    <!--<td width="72" align="center" valign="middle" bgcolor="#003366">Le</td>-->
	<td width="71" align="center" valign="middle">CUF/ Chef Service </td>
	<td width="87" align="center" valign="middle">Directeur des opérations</td>
	<td width="78" align="center" valign="middle"> Direction </td>
  </tr>
  <?
		if ($_POST['Rch'] == 'Rechercher' && $_POST['matr'] !=''){
  		$rq="SELECT * FROM RessHum_mission WHERE etat_cuf!='Annuler' AND matricule='g$matr'";
    	} else {
		$rq="exec ListConge";
		}
  $res_nbre_tot=mssql_query($rq);
      $nb_tot=mssql_num_rows($res_nbre_tot);
	//echo $nb_tot;
	$nbpages=ceil($nb_tot/20);
	$fin=$nb_tot%20;
	if (!$limit) $limit=20;
	if (!$xx) $xx=20;
			if ($_POST['Rch'] == 'Rechercher' && $_POST['matr'] !=''){
  				$qr="select * from (
				select top $xx * from (
    			select top $limit *
   		 		from RessHum_mission WHERE etat_cuf!='Annuler' AND matricule='g$matr'
    	 		order by id_c desc
		 		) as newtbl order by id_c asc
		 		) as newtbl2 order by id_c desc ";
    		} else {
				$qr="select * from (
				select top $xx * from (
    			select top $limit *
   		 		from RessHum_mission WHERE (RessHum_mission.dtsys > CONVERT(DATETIME, '2008-12-01 00:00:00', 102)) AND etat_cuf!='Annuler'
    	 		order by id_c desc
		 		) as newtbl order by id_c asc
		 		) as newtbl2 order by id_c desc ";
			}
	$rsult=mssql_query($qr);
	if (!$lim) $lim=20;
	if ($nb_tot<$lim) $lim=$nb_tot;
    for ($i=0; $i<$lim; $i++){
  $rs=mssql_fetch_array ($rsult);
  //$m=$rs['mtr'];
  //$r=mssql_query("SELECT * from utilisateur where Matricule='$m' ");
  //$s=mssql_fetch_array ($r);
   //if ($i%2 == 0){
	  $bg='tableau_bg.gif';
	  //} else {
	 // $bg='tableau_bg1.gif';
	  //} 
  echo '<tr bgcolor="#6699FF" class="txt_body" height="14">';
	echo '<td align="center" background="../fichiers_images/'.$bg.'"><a href="detmission.php?idm='.$rs['id_c'].'"  title="'.$rs['nmpr'].'">'.$rs['id_c'].'</a></td>';
	echo '<td background="../fichiers_images/'.$bg.'">'.$rs['matricule'].'</td>';
	echo '<td background="../fichiers_images/'.$bg.'">'.$rs['suf'].'</td>';
		echo '<td background="../fichiers_images/'.$bg.'">'.$rs['lieu'].'</td>';
	echo '<td align="center"  background="../fichiers_images/'.$bg.'">'.$rs['nbj'].'</td>';
	//echo '<td align="center" background="../fichiers_images/tableau_bg.gif">'.$rs['lej'].'</td>';
    if ($rs['etat_cufs']=='Refusé'){
	echo '<td align="center" background="../fichiers_images/'.$bg.'"><font color="#FF0000">'.$rs['etat_cuf'].'</font></td>';
	} else {
	echo '<td align="center" background="../fichiers_images/'.$bg.'">'.$rs['etat_cuf'].'<font color="#00FF00"></td>' ;
		//if($rs['etatc']=='Refusé') { $colc='red'; } elseif ($rs['etatc']=='Accepté'){ $colc='#00FF00'; } else { $colc='yellow'; }
	}
		if ($rs['etat_dop']=='Refusé'){
	echo '<td align="center" background="../fichiers_images/'.$bg.'"><font color="#FF3300">'.$rs['etat_dop'].'</font></td>';
} 
	elseif ($rs['etat_dop']=='En cours'){
	echo '<td align="center" background="../fichiers_images/'.$bg.'"><font color="#FFFF00">'.$rs['etat_dop'].'</font></td>';
	}else {
	echo '<td align="center" background="../fichiers_images/'.$bg.'"><font color="#33FF00">'.$rs['etat_dop'].'</td>';
	}		
	/*$chaine=$rs['dt_rh'];
	$dtrh=substr($chaine, 0, 10);*/
	if ($rs['etat_dop']=='Accepté'){
	echo '<td align="center" background="../fichiers_images/'.$bg.'"><a href="titre_mission.php?idm='.$rs['id_c'].'" target="_blank">OK</a></td>';
	} else {
	echo '<td align="center" background="../fichiers_images/'.$bg.'">---</td>';
	}
  echo '</tr>';
  }
   echo '<tr><td bgcolor=#003366 colspan=10 align=right>';
		if ($nb_tot>20)
	{
	$limit=$limit+20;
	if (!$cettepage) $cettepage=0;
	$cettepage=$cettepage+1;
	if ($cettepage < ($nbpages-1)) $lim=20; else {$lim=$fin; $xx=$fin;}
	if($cettepage>1) echo "<a href='javascript:history.back()'><b>précédent</b><a> ";
	if ($cettepage < $nbpages) echo "<a href='liste_mission.php?xx=$xx&ts=$ts&limit=$limit&cettepage=$cettepage&lim=$lim'>	&nbsp;<b>suivant</b></a>";  
	}
    	echo '</td></tr>';
		mssql_close()
  ?>
</table>
<script language="javascript" type="text/javascript">
	var table2_Props = 	{
							col_0: "select",
							col_1: "select",
							col_2: "select",
							col_3: "select",
							col_4: "select",
							col_5: "select",
							col_6: "select",
							col_7: "select",
							col_8: "select",
							col_9: "select",
							display_all_text: " [ Tous ] ",
							sort_select: true 
						};
	setFilterGrid( "table2",table2_Props );
//]]>
</script>
</td>
<td height="2"></tr>
<tr><td height="19"><p>&nbsp;</p>
  </td></tr>
</table>
</body>
</html>

donc comment je peux appeler ce script css et l'appliquer sur ce bouton

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

    <td width="167"><input name="Rch" type="submit"  id="Rch" value="Rechercher">            <!-- UF/Services :  --></td>

Merci pour vos aide

**Azerx** · 28/04/2016, 09h20

Bonjour,

pour charger ta feuille css (à placer dans le header):

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<link rel="stylesheet" href="monCSS.css" />

pour associer la classe "button" a ton bouton:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

 <td width="167"><input name="Rch" type="submit"  id="Rch" value="Rechercher" class=button>            <!-- UF/Services :  --></td>

**Boubou2020** · 28/04/2016, 15h13

merci bien

**Azerx** · 28/04/2016, 17h36

Si le problème est résolu clique sur

pour aider les personnes qui auront le même problème que toi plus tard

Comment appliquer un style css sur un bouton

CSS

Discussions similaires

Partager

Partager