Un code par ytr3d3

464 ytr3d3

Ouvrir dans l'éditeur Publiez votre code

Recommandé

11 April 2025

Une page d'accueil parfaite conçue avec Leon matrex

28 August 2025

Exemple de code HTML pour une page de connexion turque

25 May 2025

Un code par qatar2023

HTML

CSS

@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@700&display=swap');

body {
  background-color: hsl(250,17%,94%);
  height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
}

.multi-button {
  background-color: white;
  border: 1px solid white;
  border-radius: 14px;
  padding: 7px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 15px 0 rgba(0, 0, 0, 0.1);
    place-items: center;
}

#cut {
  background-color: rgb(85,131,241);
  border: 1px solid rgb(85,131,241);
  
}

#copy {
  background-color: rgb(39,166,75);
  border: 1px solid rgb(39,166,75);
  
}

#paste {
  background-color: rgb(242,185,42);
  border: 1px solid rgb(242,185,42);
  
}

.button { 
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.09), 0 6px 15px 0 rgba(0, 0, 0, 0.09);
  padding: 10px 17px 10px 17px;
    font: 15px Ubuntu;
  color: white;
  border-radius: 7px;
}

.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.button span:after {
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.button:hover span {
  padding-right: 25px;
}

.button:hover span:after {
  opacity: 1;
  right: 0;
}

#cut span:after {
  font-family: FontAwesome;
  content: "\f0c4";
}

#copy span:after {
  font-family: FontAwesome;
  content: "\f0c5";
}

#paste span:after {
  font-family: FontAwesome;
  content: "\f0ea";
}

Recommandé

Une page d'accueil parfaite conçue avec Leon matrex

Exemple de code HTML pour une page de connexion turque

Un code par qatar2023

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS