> Tous les forums > Forum des Webmasters
 lien avec boutonSujet résolu
Ajouter un message à la discussion
Pages : [1] 2 ... Fin
Page 1 sur 2 [Fin]
chabert
  Posté le 16/10/2018 @ 16:57 
Aller en bas de la page 
Astucien

Bonjour à tous,

Je commence la programmation en Html et Css

Ma question est : comment associer un lien avec la balise button

voici ma div html

divclass="box">

<button>Click</button> <button href="page_1.html">Retour à la page 1</button> </div>

Mon Css

button {


background-color: rgb(13, 19 , 206);

border: none;

border-radius: 3px;

box-shadow:

6px6px10px4pxrgba(0, 0, 0, 0.2);

color: #fff;

cursor: pointer;

font-family: monospace;

font-size: 1em; outline:

none; transition: 0.2s; }



Modifié par chabert le 16/10/2018 17:34
Publicité
Christian-S
 Posté le 16/10/2018 à 19:39 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

Hello

A ce que je vois il y a beaucoup de Taf pour y arriver dans un premier temps , (balise ouvrante, espace etc...)!!

Que veux tu veux exactement comme bouton ??

Dis moi et on verra ensemble.

En attendant faut que tu te documentes et apprennes

Apprendre le HTML et CSS => https://www.the-infos-du-geek.fr/apprendre-html-css/

en primeMa sélection d’éditeurs HTML => https://www.the-infos-du-geek.fr/selection-dediteurs-html/

tu apprendras:

Mise en page, Déclaration des styles css, les liens, Créer une feuille de style dans un fichier .css , etc..



Modifié par Christian-S le 16/10/2018 19:39
chabert
 Posté le 16/10/2018 à 20:11 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

Bonsoir Christian,

je travail avec l'éditeur Visual Studio Code.

j'apprends beaucoup avec des tutos, je sais créer des boutons. Il me manque juste la syntaxe pour lier

mes boutons vers des adresses différentes.

Christian-S
 Posté le 16/10/2018 à 21:05 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

Re

Exemple simple avec lien sur cette page de ton sujet sur PCA.

Fais gaffe a ta syntaxe, espace

Ex: ça c'est pas bon => box-shadow: 6px6px10px4pxrgba(0, 0, 0, 0.2); mais plutôt => box-shadow: 6px 6px 10px 4px rgba(0, 0, 0, 0.2);

ou encore

ça c'est pas bon => divclass="box"> pas de chevron ouvrant et d'espace entre div et la class = mais plutôt => <div class="box">

HTML :

<div class="box">

<div class="bouton"><a href="https://forum.pcastuces.com/lien_avec_bouton-f2s18077.htm?page=1&#5920816">Retour à la page 1</a></div>

</div>

Feuille CSS : Exemple

.box {

position: relative;

width: 150px;

height: 30px;

margin: 20px;

box-shadow: 6px 5px 4px rgba(0, 0, 0, 0.5);

}

.bouton {

background:#0000ff;

padding: 5px 8px;

line-height: 20px;

border-radius: 3px;

transition: 0.2s;

}

.bouton:hover {

background-color: #ff0000;

transition: 0.2s;

}

.bouton a {

color: #fff;

text-align: center;

cursor: pointer;

font-family: monospace;

font-size: 1em;

text-decoration: none;

}

Voila

chabert
 Posté le 16/10/2018 à 22:37 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

merci je commence à comprendre mais je dois encore travailler bonne soirée

chabert
 Posté le 17/10/2018 à 10:48 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

Merci pour ton exemple qui fonctionne bien.

Maintenant j'ai créer deux class bouton ils se mettent l'un sous l'autre et je n'ai pas la zone d'ombre sur les boutons.

j'aimerais les avoirs en ligne et non en colonne avec des couleurs différentes.

merci pour tes explications claires!



Modifié par chabert le 17/10/2018 12:13
Christian-S
 Posté le 17/10/2018 à 16:54 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

Hello

HTML:

<div class="box">
<div class="bouton"><a href="https://forum.pcastuces.com/lien_avec_bouton-f2s18077.htm?page=1&#5920816">Lien avec bouton</a></div>
<div class="bouton"><a href="https://forum.pcastuces.com/">PCAstuces</a></div>

</div>

CSS:

.box {

position: relative;

width: 250px;

height: 55px;

margin: 20px;

padding: 3px 7px;

}

.bouton {

background: #0000ff;

display: inline-block;

text-align: center;

margin: 2px;

padding: 5px;

line-height: 20px;

border-radius: 3px;

border: 3px solid #ccc;

box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.5);

transition: 0.2s;

}

.bouton:hover {

background: linear-gradient(#ff0000 20%, #000 80%);

border-radius: 60px;

transition: 0.2s;

}

.bouton a {

color: #fff;

text-align: center;

cursor: pointer;

font-family: monospace;

font-size: 1em;

text-decoration: none;

}

Après tu peux déplacer la div box avec le margin

Demande au cas ou



Modifié par Christian-S le 17/10/2018 19:02
chabert
 Posté le 17/10/2018 à 18:17 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

Bonsoir;

merci j'essaie ce soir à la maison je suis en dialye donc difficile de coder.

j'ai regardé pleins de tutos

chabert
 Posté le 17/10/2018 à 20:45 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

voila ou j'en suis grr

voila ou j'en suis



Modifié par chabert le 17/10/2018 20:51
Christian-S
 Posté le 17/10/2018 à 21:21 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

Re

Ben oui faut encore réviser !!

.box {

position: relative;

width: 650px;

height: 55px;

margin: 20px;

padding: 3px 7px;

}

si tu veux centrer la div ".box " sur ta page

.box {

position: relative;

width: 650px;

height: 55px;

margin: 20px auto;

padding: 3px 7px;

}

Soit :

/* vertical | horizontal */

margin: 20px auto;

etc..

ou encore et d'infimes possibilités

Bonne révision



Modifié par Christian-S le 17/10/2018 21:29
chabert
 Posté le 17/10/2018 à 21:33 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

Merci Christian.

Je regarde ça demain, bonne soirée.

Christian-S
 Posté le 18/10/2018 à 05:08 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

Hello

Si dans un premier temps tu veux apprendre commence par ces deux Sites en apprenant sérieusement

1) Openclassrooms, Apprenez à créer votre site web avec HTML5 et CSS3

Comment fait-on pour créer des sites web => https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3/1604192-comment-fait-on-pour-creer-des-sites-web

et

2) Pierre Giraud.com

APPRENDRE LE HTML ET LE CSS => https://www.pierre-giraud.com/html-css/cours-complet/creation-structure-site-html-css.php

après tu as encore de quoi apprendre => Apprendre le HTML et CSS => https://www.the-infos-du-geek.fr/apprendre-html-css/

chabert
 Posté le 18/10/2018 à 08:55 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

Bonjour Christian,

Je regarde les tutos de Pierre Giraud, super bien expliqué.

J'ai du mal à retenir mais avec le temps et des exercices je vais y arriver et aussi de l'aide que vous m'apporté.

Merci

chabert
 Posté le 18/10/2018 à 18:11 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

Pour suivre j'ai besoin de savoir comment lier un bouton:

ici pour url d'Orange ok, mais pour lier un autre fichier html au bouton je ne trouve pas la syntaxe

<divclass="bouton"><ahref="https://www.orange.fr/portail/">Portail Orange</a></div>
Christian-S
 Posté le 18/10/2018 à 18:25 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

chabert
 Posté le 20/10/2018 à 09:14 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

Bonjour Christian,

j'ai un peu de mal à comprendre je pense que je veux aller trop vite.

Je reprend les tutos de Pierre Giraud depuis le début.

merci pour tout

zoulouman
 Posté le 20/10/2018 à 10:57 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

Salut,

Sinon, tu prends les bêtes boutons HTML et tu leur donnes un style ensuite (par le biais de classes, ID ou globalement avec un unique code CSS "button")

Avec le tag Input :

<input type="button" value="CLIQUEZ ICI" onclick="window.location='https://example.com/dossier/page.html'">

Ou avec le tag Button :

<button type="button" onclick="window.location='./dossier/page.html'">CLIQUEZ ICI</button>

zoulouman
 Posté le 20/10/2018 à 11:19 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

@Chabert : Une réponse pour toi juste au dessus.
@Christian-s :

Salut,

Tu utilises quelle extension, avec Brackets, pour avoir la couleur directement dans le CSS ?

Une autre extension m'intéresse bien aussi, c'est celle qui "suit" les balises (ici "Title") :

chabert
 Posté le 20/10/2018 à 12:08 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

Merci Zoulouman & Christian je regarde cela dans l'après midi

chabert
 Posté le 20/10/2018 à 17:01 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

Super tous fonctionne bien,

maintenant il faut que je mette différente couleur aux boutons

Christian-S
 Posté le 20/10/2018 à 17:18 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

zoulouman a écrit :


@Christian-s :

Salut,

Tu utilises quelle extension, avec Brackets, pour avoir la couleur directement dans le CSS ?

Une autre extension m'intéresse bien aussi, c'est celle qui "suit" les balises (ici "Title") :

Hello zoulouman

Dans ce sujet j'avais => Sublime Text 3 - 3176

Tu parles de

Color Highlighter : pour afficher les couleurs CSS dans la source en highlight au focus

et

Bracket Highlighter

Indique quand vous cliquez sur une “div” ou bien sur une balise ouvrante, celle qui va la fermer.

Encore une Question ??



Modifié par Christian-S le 20/10/2018 17:20
Christian-S
 Posté le 20/10/2018 à 17:20 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

chabert a écrit :

Super tous fonctionne bien,

maintenant il faut que je mette différente couleur aux boutons

Hello Chabert

Quel est ton soucis ??



Modifié par Christian-S le 20/10/2018 17:21
chabert
 Posté le 20/10/2018 à 17:48 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

je ne vois pas comment mettre une couleur différente sur chaque bouton

Christian-S
 Posté le 20/10/2018 à 17:50 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

chabert a écrit :

je ne vois pas comment mettre une couleur différente sur chaque bouton

Re

Donne moi ton CSS actuel

Dis moi quelle couleur appliquer a chaque bouton

chabert
 Posté le 20/10/2018 à 18:31 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

voila le css actuellement j'ai 7 boutons.

le premier en vert, deuxième plus clair, trosième encore plus clair etc...

merci encore si tu peux me mettre en rouge les modification tu seras super!

.box {
position: relative;
width: 750px;
height: 20px;
margin: 20px;
padding: 50px 70px;
}
.bouton {

background: #fff;
display: inline-block;
text-align: center;
margin: 2px;
padding: 5px;
line-height: 20px;
border-radius: 3px;
border: 3px solid #ccc;
box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.5);
transition: 0.2s;
}
.bouton:hover {

background: linear-gradient(#df8c8c13 20%, #000 80%);
border-radius: 60px;
transition: 0.2s;
}
.bouton a {

color: rgb(64, 152, 235);
text-align: center;
cursor: pointer;
font-family: monospace;
font-size: 1em;
text-decoration: none;
}
body{
background-color: rgb(241, 147, 147);
color:#fff;

}
img{
width: 250px;
height: 150px;
}
#p1{
font-size: 20px;
color:#ffffff;
}
.p1{
font-size: 18px;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
color:rgb(242, 248, 246);
}
#para{

color:white;
font-family: Verdana, Geneva, Tahoma, sans-serif
font-size: 30px;
font-weight: bold;
}
h1{
color: #fff;
font-style: oblique;
margin-left: 40%;
}
h2{
color: #fff;
font-style: oblique;
margin-left: 35%;
text-decoration-line: underline;
}
h3{
color: #fff;
font-style: oblique;
margin-left: 85%;
text-decoration-line: underline;
}
article{
margin-left: 15%;
height: 50%;
}

Christian-S
 Posté le 20/10/2018 à 19:27 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

Re

Met aussi le HTML que je sache combien de boutons, etc..

Publicité
Pages : [1] 2 ... Fin
Page 1 sur 2 [Fin]

Vous devez être connecté pour participer à la discussion.
Cliquez ici pour vous identifier.

Vous n'avez pas de compte ? Créez-en un gratuitement !
Recevoir PC Astuces par e-mail


La Lettre quotidienne +226 000 inscrits
Avec l'actu, des logiciels, des applis, des astuces, des bons plans, ...

Les bonnes affaires
Une fois par semaine, un récap des meilleurs offres.

Les fonds d'écran
De jolies photos pour personnaliser votre bureau. Une fois par semaine.

Les nouveaux Bons Plans
Des notifications pour ne pas rater les bons plans publiés sur le site.

Les bons plans du moment PC Astuces

Tous les Bons Plans
59,99 €Ecouteurs intra-auriculaires sans fil Bluetooth Jabra Elite 3 à 59,99 €
Valable jusqu'au 28 Mai

Boulanger fait une belle promotion sur les écouteurs intra-auriculaires sans fil Bluetooth Jabra Elite 3 qui passent à 59,99 €. On les trouve ailleurs à partir de 79,99 €.

Profitez d'une expérience d'écoute unique grâce aux Jabra Elite 3. Des écouteurs intra-auriculaires True Wireless qui ont été conçus tout spécialement pour donner un nouveau souffle à votre musique. Ils sont aussi capables de vous offrir une qualité d’appel et un son exceptionnel, quel que soit l’endroit où vous allez.


> Voir l'offre
139,50 €Montre connectée Samsung Galaxy Watch 4 40 mm à 139,50 € livrée
Valable jusqu'au 29 Mai

Amazon Allemagne fait une belle promotion la montre connectée Samsung Galaxy Watch 4 40 mm qui passe à 134,74 € (avec la TVA ajustée). Comptez 4,76 € pour la livraison en France soit un total de 139,50 € livrée. On la trouve ailleurs autour de 209,99 €.

La montre connectée Samsung Galaxy Watch 4, propulsée par Android Wear 3.0, vous offre un accès idéal à l'univers Google tout en proposant un écran Super Amoled 1.2", une belle capacité de stockage et un suivi précis de vos activités sportives, votre santé et votre sommeil.

Montre en français dès le premier démarrage. Garantie européenne 3 ans. Vous pouvez utiliser votre compte Amazon FR sur Amazon DE. Pas de douane.


> Voir l'offre
57,49 €Lego Star Wars The Mandalorian L'enfant 75318 à 57,49 € livré
Valable jusqu'au 29 Mai

Amazon Allemagne fait une promotion sur Lego Star Wars The Mandalorian L'enfant 75318 qui passe à 50,90 € (avec la TVA ajustée). Comptez 6,59 € pour la livraison en France soit un total de 57,49 € livré. On le trouve ailleurs à partir de 66,99 €.

Les fans vont fondre de tendresse devant le modèle L’Enfant (75318) LEGO® Star Wars™, à construire et à exposer. Les détails authentiques de ce personnage bien connu, affectueusement appelé Bébé Yoda, sont recréés dans le style LEGO, avec une tête, des oreilles et une bouche articulées permettant de créer différentes expressions. L’Enfant peut également tenir dans la main son jouet préféré, la boule d’une manette de vaisseau (élément inclus), comme il le fait dans Star Wars : The Mandalorian. 1073 pièces.


> Voir l'offre

Sujets relatifs
Joomla nouvelle fenêtre avec lien externe
Avoir un lien avec des images sur une feuile html
lien entre page et bouton
bouton lien pour continuer script
lien qui fonctionne avec IE7 et pas avec Firefox
images tournantes avec lien
Un h1 avec un lien qui me donne de la misère!
courriel avec lien vers site
Lien cliquable avec bannière flash
comment créer un bouton avec liste déroulante ?
Plus de sujets relatifs à lien avec bouton
 > Tous les forums > Forum Forum des Webmasters