mixins

In this example below you will see how to do a mixins with some HTML / CSS and Javascript

j'apprend à utiliser les mixins ... génial !

Thumbnail
This awesome code was written by jeanjeff, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright jeanjeff ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>mixins</title>
  <link href='https://fonts.googleapis.com/css?family=Bangers' rel='stylesheet' type='text/css'>
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div style="width:20%;">
<a href="" class="bouton-alerte">truc</a>
<a href="" class="bouton-info">truc</a>
<a href="" class="bouton-news">NEWS</a>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/jeanjeff/mixins-JGjNJd */
* {
  font-family: 'Bangers', cursive;
  font-size: 30px;
}

.bouton-alerte {
  display: inline-block;
  width: 200px;
  text-decoration: none;
  text-align: center;
  line-height: 1.45em;
  border-radius: 7px;
  height: 40px;
  margin-bottom: 4px;
  background-color: DarkRed;
  color: white;
}

.bouton-alerte:before,
.bouton-alerte:after {
  content: " - ";
}

.bouton-alerte:hover {
  display: inline-block;
  width: 200px;
  text-decoration: none;
  text-align: center;
  line-height: 1.45em;
  border-radius: 7px;
  height: 40px;
  margin-bottom: 4px;
  background-color: DarkOliveGreen;
  color: red;
}

.bouton-info {
  display: inline-block;
  width: 200px;
  text-decoration: none;
  text-align: center;
  line-height: 1.45em;
  border-radius: 7px;
  height: 40px;
  margin-bottom: 4px;
  background-color: CornflowerBlue;
}

.bouton-news {
  display: inline-block;
  width: 100px;
  text-decoration: none;
  text-align: center;
  line-height: 1em;
  border-radius: 4px;
  background-color: DarkRed;
  color: white;
}

Comments