J'ai trouve ces boutons sympas mais, j'ai un souci.
Voici mon code HTML et CSS :
code CSS
Voilà j'ai modifié la couleur du bouton et le shadow
Mais voilà
lorsque je mets un fond de couleur sur le fond ou le container_boutons, la transparence rvga suit la couleur du fond et je voudrais que le fond du container_boutons soit blanc et voyant tout mon shadow de mon bouton mais occulte une partie du shadow (partie droite)du bouton.
je m'arrive pas à m'en dépetrer.
je pense que c'est un souci de position ou du lien de parenté des blocs mais là je cale.
Merci de vos réponses
Modifié par Stéphanie W. (23 Feb 2013 - 17:07)
Voici mon code HTML et CSS :
<!DOCTYPE html>
<!--[if lt IE 7 ]> <html class="ie ie6 no-js" lang="en"> <![endif]-->
<!--[if IE 7 ]> <html class="ie ie7 no-js" lang="en"> <![endif]-->
<!--[if IE 8 ]> <html class="ie ie8 no-js" lang="en"> <![endif]-->
<!--[if IE 9 ]> <html class="ie ie9 no-js" lang="en"> <![endif]-->
<!--[if gt IE 9]><!--><html class="no-js" lang="en"><!--<![endif]-->
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="css/styletest.css" />
</head>
<body>
<div id="fond">
<div id="container_boutons">
<p>
<a href="#" class="bouton">
Lire la suite...!
</a>
</p>
<p>
<a href="#" class="bouton">
Lire la Suite...
</a>
</p>
<p>
<a href="#" class="bouton">
Lire la Suite...
</a>
</p>
</div>
</div>
</body>
</html>code CSS
@charset "UTF-8";
/* CSS Document */
#fond {
background:#006;
}
#container_boutons {
color:#FFF;
width: 200px;
padding-top: 20px;
margin: auto;
padding-left: 100px;
border-top-width: thick;
border-right-width: thick;
border-bottom-width: thick;
border-left-width: thick;
border-top-style: inset;
border-right-style: inset;
border-bottom-style: inset;
border-left-style: inset;
background: rgba(255,255,255,0.3);
}
#container_boutons p{
display:block;
padding-bottom:100px;
}
.bouton {
background-color:#E17100;
padding:10px;
position:relative;
font-family: 'Open Sans', sans-serif;
font-size:12px;
text-decoration:none;
color:#373737;
background-image: linear-gradient(bottom, rgb(225,113,0) 0%, rgb(255, 163, 50) 100%);
background-image: -o-linear-gradient(bottom, rgb(225,113,0) 0%, rgb(255, 163, 50) 100%);
background-image: -moz-linear-gradient(bottom, rgb(225,113,0) 0%, rgb(255, 163, 50) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(225,113,0) 0%, rgb(255, 163, 50) 100%);
background-image: -ms-linear-gradient(bottom, rgb(225,113,0) 0%, rgb(255, 163, 50) 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(73,73,73)),
color-stop(1, rgb(51,51,51))
);
-webkit-box-shadow: inset 0px 1px 0px #494949 6px 0px #333333;
-moz-box-shadow: inset 0px 1px 0px #494949, 0px 6px 0px #333333;
-o-box-shadow: inset 0px 1px 0px #494949, 0px 6px 0px #333333;
box-shadow: inset 0px 1px 0px #494949, 0px 6px 0px #333333;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}
.bouton::before {
background-color:#333333;
content:"";
display:block;
position:absolute;
width:100%;
height:100%;
padding-left:2px;
padding-right:2px;
padding-bottom:4px;
left:-2px;
top:5px;
z-index:-2;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-o-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0px 1px 0px #fff;
-moz-box-shadow: 0px 1px 0px #fff;
-o-box-shadow: 0px 1px 0px #fff;
box-shadow: 0px 1px 0px #fff;
}
.bouton:active {
color:#333333;
text-shadow: 0px 1px 1px rgba(255,255,255,0.3);
background:rgb(225,113,0);
-webkit-box-shadow: inset 0px 1px 0px #494949, inset 0px -1px 0px #333333;
-moz-box-shadow: inset 0px 1px 0px #494949, inset 0px -1px 0px #333333;
-o-box-shadow: inset 0px 1px 0px #494949, inset 0px -1px 0px #333333;
box-shadow: inset 0px 1px 0px#494949, inset 0px -1px 0px #333333;
top:7px;
}
.bouton:active::before {
top:-2px;
}Voilà j'ai modifié la couleur du bouton et le shadow
Mais voilà
lorsque je mets un fond de couleur sur le fond ou le container_boutons, la transparence rvga suit la couleur du fond et je voudrais que le fond du container_boutons soit blanc et voyant tout mon shadow de mon bouton mais occulte une partie du shadow (partie droite)du bouton.
je m'arrive pas à m'en dépetrer.
je pense que c'est un souci de position ou du lien de parenté des blocs mais là je cale.
Merci de vos réponses
Modifié par Stéphanie W. (23 Feb 2013 - 17:07)