Bonjour à tous, 

Je me demande comment designer un bouton en CSS. 

Voilà à gauche le bouton que je suis sensée avoir, à droit le bouton que j'ai.

Je vous transmets le code CSS pour ce magnifique chef d'oeuvre : 

.boutonC
{
    padding: 10px;
    background-color: #5CADD3;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    height: 25px;
    width: 90px;
}

.boutonC:hover
{
	background-color:white;
}

Si quelqu'un à donc une idée de la manière dont je peux me débarrasser de ce vilain cadre gris... Je suis preneuse !

Et tant que j'y suis, si jamais je tombe sur un fanatique de bouton css, j'ai un second "problème" (il y a quand même pire dans la vie qu'une histoire de boutons CSS haha), voici mon dernier : Cependant j'aimerais qu'il ne soit qu'un demi cercle (car il est sur le bord droit de ma page et "dépasse" de celle-çi). J'aimerais utiliser un framework mais malheureusement pour cet excercice, je n'ai pas le droit. Je vous transfère mon code de ce dernier

.boutonD
{
	display: flex;
	float: right;
	position: absolute;
    top: 50%;
    right: 0px;
    background-color: #424246;
    width: 72px;
    height: 72px;
    margin-right: -33px;
    transform: translate(0%, -50%);
    border-radius: 100% 100% 100% 100%;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

}

.boutonD:hover
{
	background-color: grey;
}

Voila voila, si quelqu'un peut m'aider je lui en serai très reconnaissante !

Bonne journée ! 

Bonjour,

Faire un bouton en css est très simple. Tu as juste besoin de styliser comme tu le veux une balise a.

Plus d'informations et d'exemples ici : https://www.w3schools.com/css/css3_buttons.asp

Bonjour,

du CSS sans le HTML associé c'est comme un potage sans bol : on sent que ça a l'air bon, on voit flotter quelques légumes chouettes, on peut piter à la cuillère, mais on ne peut pas y goûter pleinement

Lamecarlate a écrit:

Bonjour,

du CSS sans le HTML associé c'est comme un potage sans bol : on sent que ça a l'air bon, on voit flotter quelques légumes chouettes, on peut piter à la cuillère, mais on ne peut pas y goûter pleinement

Très poétique! 

J'ai songé à joindre mon html, mais il ne me parait pas nécessaire, j'ai surement tord ! Alors voici le html pour le bouton "rond" est boutonD et le bouton "plus d'infos" le boutonC

Autant pour moi

<div class="slides">
                <span class="titre"> 
                <h1><strong><span class="name">WEBAGENCY</span></strong> : L'AGENCE DE TOUS</br> VOS PROJETS !</h1>
                </span>
            </div>

            <div class="boutonG">
                    <input type="button" value="<" href="lien"/>
            </div>
            <div class="boutonD">
                    <input type="button" value=">" href="lien"/>
            </div>
            <div class="boutonC">
                    <input type="button" value="Plus d'infos" href="#Services"/>
            </div>

Mewen_bzh a écrit:

Bonjour,

Faire un bouton en css est très simple. Tu as juste besoin de styliser comme tu le veux une balise a.

Plus d'informations et d'exemples ici : https://www.w3schools.com/css/css3_buttons.asp

Merci, je regarde ça ! 

-
Edité par Jejetti 19 octobre 2017 à 15:41:27

Tu peux mettre directement tes classes sur les boutons (<input> ou <button> - ou <a> si ça doit être un lien).

Par contre, "href" ne se met que sur les <a> et les <link>.

Et il faut décider de ce que font tes boutons : tu vas quelque part -> c'est un <a>, tu fais une action -> c'est un <button>.

Bonjour,

Je me permet de rajouter un élement au commentaire de Lamecarlate, <a>, un lien, <button> une action, et <input type="button/submit"> C'est pour un bouton dans un formulaire donc a moins que ne voit pas les balises <form> dans ton bout de code, attention a utiliser le bon element.. #Semantique

Je me permet de rajouter une couche, mais tu pourrais diviser ceci en un peu plus de class. Les class sont la pour éviter la redondance et te permet d'écrire du CSS pour une "collection" d'element qui porteront cette classe.

Ici on voit que tu met une class par bouton, ce qui t'obligera a réecrire le meme code pour chaque button avec une nouvelle lettre^, alors que je pense que tu voudrais que tous les boutons de ton site ai le meme design a peut pres, ajuster pour certains ( les ronds, les carrés, les bleu, les rouges... ) 

Je sais que c'est pas simple au premier coup d'oeil mais dis-toi une chose, si tu recopie les meme propriété css d'une class a l'autre pour un meme element, c'est que tu peux les rassembler^^

Super merci à tous ! Je vais corriger tout ça maintenant 

Coder reste pour moi... assez nouveau et compliqué, d'où le bazar sur ma feuille 

En revanche, si quelqu'un à des idées pour mes histoires de boutons, je suis preneuse ! J'ai essayé avec https://www.w3schools.com/css/css3_buttons.asp mais rien à faire, j'ai toujours un cadre blanc avec une vieille font à l'intérieur... How can I get rid of it ?

Donne ton code mis à jour.

Bonsoir à tous ! 
Alors, j'ai regardé mon code de nouveau et bien regardé ce que vous m'avez écris, cependant j'ai quelques zones d'ombres.

Donc, mon bouton est bien de type button, car il va me servir plus tard à faire défiler une image. J'utilise donc la classe correspondante. Comme annoncé au dessus, il ne faut pas utiliser la classe href sur un button... Donc, que dois-je mettre à la place ? J'ai regardé sur internet et j'avoue ne pas vraiment trouver de réponse à cette question donc je reviens vers vous (noobie spoiled).

Concernant le regroupement de mes classes, je ne préfère pas pour le moment, j'ai du mal à jongler avec toutes mes classes, et j'ai peur de ne plus pouvoir les positionner aux endroits voulus après. Bref je note la leçon mais je vais l'appliquer un peu plus tard quand je serai plus à l'aise avec flexbox et tout le tralala.

Voila, désolée de la lenteur , si quelqu'un peut m'éclairer sur un code propre, ça serait super sympa (ou me rediriger vers un bon site ou autre... ).

Bonjour Jejetti :

Jejetti a écrit:

Donc, mon bouton est bien de type button, car il va me servir plus tard à faire défiler une image. J'utilise donc la classe correspondante. Comme annoncé au dessus, il ne faut pas utiliser la classe href sur un button... Donc, que dois-je mettre à la place ? J'ai regardé sur internet et j'avoue ne pas vraiment trouver de réponse à cette question donc je reviens vers vous (noobie spoiled).

Donc comme explicité précédemment par Lamecarlate, tout dépend ce que tu cherches a faire.

Lamecarlate a écrit:

Et il faut décider de ce que font tes boutons : tu vas quelque part -> c'est un <a>, tu fais une action -> c'est un <button>.

Donc un lien vers une page de ton site, ou exterieur, tu utilises une balise <a> avec un href="lelien" Et tu applique ta classe sur le a, pour le faire ressembler a un bouton^

<a href="www.google.fr" class="boutonDesign">Un bouton vers google</a>

<a href="ma_page.html" class="boutonDesign">Un bouton vers ma page interne</a>

les boutons, c'est pour les formulaire, il utilisera donc l'attribut action de ce dernier pour donner la direction, en plus des éléments du formulaire a soumettre^^

<

<form action="mon_action.php" method="POST">
  //... Plein d'input 
  <button type="submit" class="boutonDesign">Envoyer mon formulaire</button>
</form>

-
Edité par Hsuissia 23 octobre 2017 à 14:56:11

Hsuissia > non non Un <button> peut très bien se trouver en dehors de formulaires, s'il est de type "button". Et au vu de la demande de l'OP (contrôle d'un carroussel) c'est bien ça qui est nécessaire.

Oui pardon, j'ai été un peu vite dans ma description. De toute façon ta citation était la : aller quelque part ( <a> ) une action ( <button> ).

thanks  support

Ok super !

Merci à tous, j'ai compris

Mon mentor m'a fait parvenir ce site, pour ceux qui se poseront des questions et qui tomberont sur le sujet : 

http://css.mammouthland.net/boutons-en-css-rollover.php