Incrustation de boutons avec une simple class

**jonasky** · 22/05/2014, 20h11

Bonjour, bonsoir

Tout d'abord je suis un grand débutant en langage soyez indulgent.

J'ai voulu créer un CSS modulable qui permet d'incruster un bouton avec une classe. Avec le combo sass/compass

Voilà le code scss(1/2) :

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
/* Import this file using the following HTML or equivalent:
 * <link href="/css/style_btn.css" rel="stylesheet" type="text/css" /> */
/*Importer ce fichier en utilisant le HTML ou équivalent suivant:
 * <link href="/css/style_btn.css" rel="stylesheet" type="text/css" /> */
/*The configuration is managed in "config / style btn config.sccs"
 le configuration se gère dans "config/style btn config.sccs"*/
 
 
/*---------------------------------------------------------------------------------------------*/
/*Inport compass*/
@import "compass/css3", "config/style_btn_config.scss"; 
/*Extends*/
.btn_content{
.btn{font-size: $btn_size_font;
	 height: $btn_px_height;}
 
span
	{
		@include border-radius(4px, 4px); 
		background-color: $btn_default_color;
		line-height: $btn_px_height;
		display: inline;
		margin: $btn_margin;
		color: $btn_color_font;
	}	
/*size btn*/
.btn_small span{@extend span ; padding:  $btn_padding_size_small};
 
 
.btn_medium span{@extend span; padding:  $btn_padding_size_medium};
 
 
.btn_large span{@extend span; padding:  $btn_padding_size_large};
 
/*no radius*/
 
.btn_no_radius span {@extend span; @include border-radius(0px, 0px);}
 
/*color font btn*/
.btn_font_norm span{@extend span; color: $btn_color_font_norm};
 
.btn_font_war span{@extend span; color: $btn_color_font_war};
 
.btn_font_vwar span{@extend span ; color: $btn_color_font_vwar};
 
 
/*color buttom*/
.btn_color_norm span{@include box-shadow(inset 0 -47px 55px 24px rgba(0,0,0,.08));
						 @include background-image(linear-gradient(bottom, #39de00 0%, #5fdf02 100%)) };
 
.btn_color_war span{@include box-shadow(inset 0 -47px 55px 24px rgba(0,0,0,.08));
						   @include background-image(linear-gradient(bottom, #ffb401 0%, #ffb505 100%)) };
 
.btn_color_vwar span{@include box-shadow(inset 0 -47px 55px 24px rgba(0,0,0,.08));
							@include background-image(linear-gradient(bottom, #fe0000 0%, #d30303 100%)) };
 
/*reset*/
 
a{
		padding: 0;
		list-style: none;
		text-decoration: none;
		margin: auto;
	    };
}

code scss:

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
/*---------------------------------------------------------------------------------------------*/
/*Inport compass*/
@import "compass/css3";
 
 
	/*var sass nav*/
		/*font*/
			$btn_size_font : 25px;
			$btn_default_color : #11b7f4;
			$btn_color_font : #ffffff;
			$btn_color_font_norm : #39de00;
			$btn_color_font_war : #ffb401;
			$btn_color_font_vwar : #fe0000;
		/*box size*/
			$btn_padding_size_small : 5px 20px 5px 20px;/*top right bottom left*/ 
			$btn_padding_size_medium : 5px 30px 5px 30px;/*top right bottom left*/ 
			$btn_padding_size_large : 5px 40px 5px 40px;/*top right bottom left*/
		/*margin*/	
			$btn_margin : 10px 0px 0px 30px; /*top right bottom left*/ 
 
	/*var = */
		$btn_px_height : $btn_size_font;

exemple html:

Code html :

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
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="css/style.css" rel="stylesheet" type="text/css" />
    <link href="css/style_btn.css" rel="stylesheet" type="text/css" />
  </head>
 
  <header>
    <h1>Buttom flat extend Gleyze jonathan first real code</h1>
  </header>
 
  <body>
    <h2>Button</h2>
    <h3>Box color<h3>
      <div class="btn_content">
        <a class="btn_large" href="#"><span>Hello world</span></a>
        <a class="btn_small btn_color_norm " href="#"><span>Hello world</span></a>
        <a class="btn_medium btn_color_war" href="#"><span>Hello world</span></a>
        <a class="btn_large btn_color_vwar" href="#"><span>Hello world</span></a>
      </div>
    <h3>font color<h3>
      <div class="btn_content">
        <a class="btn_small btn_font_norm" href="#"><span>Hello world</span></a>
        <a class="btn_small btn_font_war" href="#" ><span>Hello world</span></a>
        <a class="btn_small btn_font_vwar" href="#"><span>Hello world</span></a>
      </div>
    <h3>no radius<h3>
      <div class="btn_content">
        <a class="btn_small btn_no_radius" href="#"><span>Hello world</span></a>
      </div>
  </body>
 
  <footer>
 
  </footer>
</html>

Je poste ce message pour avoir des avis.

Le code est pas tout à fait fini. S'il y a des sections à améliorer ou ajouter dites-le moi.

Il manque la gestion de la police et effet de focus et des icônes.

Si vous voulez le voir de plus près, un zip est en download.

le sass : http://sass-lang.com/
le rendu : ici
lien de mon github : https://github.com/jonasky/FlatUiScss

Incrustation de boutons avec une simple class

CSS

Discussions similaires

Partager

Partager