Cadre à bords ronds avec une légende

<fieldset style="width:94%;background: #e4e4e4;border: 2px solid #ff0000; margin:auto; border-radius: 20px; padding: 5px; box-shadow: 8px 6px 8px rgb(128,128,128);">
<legend align="center" style="padding:0px 20px 0px 20px; border-radius: 20px; color:#ff0000;text-shadow: 1px 1px #ffffff; border: 2px solid #ff0000;box-shadow: 8px 6px 8px #ff0000; background: #e4e4e4;"><strong>Mon beau cadre</strong></legend>

<p style="color: rgb(255, 0, 0); text-shadow: 1px 1px rgb(255, 255, 255); padding: 10px; text-align: center;">Exemple de cadre.</p>

</fieldset>

Les Attributs de "fieldset" et "legend" sont:

margin-left:80px; positionne le cadre sur sa gauche où l'on veut.
margin-right:80px;
margin-top:80px;
margin-bottom:80px;
margin: auto; centre l'élément en question.
background: #e4e4e4; couleur de fond.
width:94%; largeur du cadre peut être en px (pixels) ou bien %.
color:#ff0000; couleur du texte.
text-shadow: 1px 1px #ffffff; ombre du texte.
border-radius: 20px; l'arrondi du cadre, ici tous les coins sont identiques.
padding: 5px; espacement entre les objets et le cadre.
text-align: center; Alignement du texte dans le cadre.
box-shadow: 8px 6px 8px rgb(128,128,128); ombre du cadre.

Habillage d'un lien hypertexte

Il suffit simplement d'encadrer la page ou bien juste notre lien de ce code:

<div class="mes-liens">

... [code de la page ou du lien] ...

</div>

Au préalable nous aurons défini la classe "mes-liens", par exemple comme ceci:

<style type="text/css">.mes-liens a:link {color: #2a67e3; text-shadow: 1px 1px #ffffff; text-decoration: none;}
</style>
<style type="text/css">.mes-liens a:visited {color: #2a67e3; text-shadow: 1px 1px #ffffff; text-decoration: none;}
</style>
<style type="text/css">.mes-liens a:hover {color: #ffffff; font-weight:bold; text-shadow: 0px 0px #ffffff; background-color: #2a67e3; padding:1px 15px 1px 15px; border-radius:10px; box-shadow: 5px 5px 3px #ffffff; text-decoration: none;}
</style>

Nous allons décrire les différents paramètres qui ne sont pas exhaustifs.

Une image animée

Partie déclarative des classes:

<style type="text/css">.container {position: relative; width: 150px; height: 100%; margin: auto;}
</style>
<style type="text/css">.image {  display: block;  width: 100%;  height: auto;}
</style>
<style type="text/css">.overlay {  position: absolute;  bottom: 100%;  left: 0;  right: 0;  height: 0;  width: 100%;  opacity: 0;  overflow: hidden;  transition: .2s ease;  background-color: #000000;}
</style>
<style type="text/css">.container:hover .overlay {  bottom: 0;  height: 100%; opacity: 0.5;}
</style>
<style type="text/css">.text {color: rgba(255,255,255,0.8); font-size: 10px; position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%, -50%);  -ms-transform: translate(-50%, -50%);}
</style>

Partie usage:

<div class="container">
<p style="text-align: center;"><a href="http://carnot.mon-ent-occitanie.fr/pole-d-appui/usages-tice/ent/html-css-pour-aller-plus-loin-dans-la-forme--57031.htm#Table%20des%20mati%C3%A8res"><img alt="" border="1" height="256" hspace="0" src="https://carnot.mon-ent-occitanie.fr/lectureFichiergw.do?ID_FICHIER=1518088764262" style="border-width: 1px !important; border-style: solid !important;" title="" vspace="0" width="256" /></a></p>

<div class="overlay">
<div class="text"><a class="text" href="http://carnot.mon-ent-occitanie.fr/pole-d-appui/usages-tice/ent/html-css-pour-aller-plus-loin-dans-la-forme--57031.htm#image%20anim%C3%A9e" style="font-size: 41px;">Voilé</a></div>
</div>
</div>

Table des matières

Partie déclarative des classes:

<style type="text/css">.mon-button {border-radius: 3px;    background-color: green; font-weight: bold;    border: 2px solid #004d1a;    color: white;    padding: 15px 32px;    text-align: center;    text-decoration: none;    display: inline-block;    font-size: 16px;    margin: 4px 2px;    cursor: pointer;  transition-duration: 0.4s;}
</style>

<style type="text/css">.mon-button:hover {    background-color: white; font-weight: bold;    color: green; border: 2px solid #004d1a;}
</style>

Partie usage:

On met un lien retour à la table des matière de cette page sur le bouton.

<p><a class="mon-button" href="#Table des matières">Link Button</a></p>