Bonjour,

Je n'arrive pas a télécharger un .exe avec mon code (j'ai déjà essayé de faire <href="http://monsite.fr/fichier.exe">)

Mon CSS :

@import url(https://fonts.googleapis.com/css?family=Nunito:400,700,300);
* {
  box-sizing: border-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

body {
  font-family: 'Nunito', sans-serif;
  background: #2C363F;
}
body .container {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 660px;
  margin: auto;
}
body .container a.download, body .container a.follow {
  text-align: center;
  margin-top: 80px;
  width: 300px;
  float: left;
  display: inline-block;
  padding: 16px 30px;
  background: #41EFB6;
  color: white;
  font-weight: 900;
  font-family: 'nunito';
  text-decoration: none;
  border-radius: 4px;
  margin-right: 12px;
}
body .container a.download i, body .container a.follow i {
  margin-right: 10px;
}
body .container a.follow {
  float: left;
  padding: 14px 30px;
  background: none;
  color: white;
  border: 2px solid white;
}
body .container a.follow:hover {
  color: #41EFB6;
  border-color: #41EFB6;
}
body .container a {
  color: #28ECC3;
}
body .container h1 {
  color: white;
  text-align: center;
  margin: 0;
}
body .container h2 {
  margin: 10px 0px 80px 0px;
  color: white;
  font-size: 14px;
  text-align: center;
}
body .container_button {
  border: 2px solid #28ECC3;
  width: 200px;
  text-align: center;
  height: 48px;
  padding: 2px 4px;
  border-radius: 100px;
  color: white;
  margin: 0 auto;
  transition: all .3s;
  position: relative;
  z-index: 3;
  line-height: 42px;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 14px;
}
body .container_button:hover {
  box-shadow: 0px 0px 0px 6px rgba(0, 0, 0, 0.2);
  background: #28ECC3;
}
body .container_button:hover span i {
  margin-right: 10px;
}
body .container_button:active {
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2);
}
body .container_button__bar {
  width: 0%;
  position: absolute;
  height: 8px;
  top: 4px;
  border-radius: 100px;
  background: -webkit-linear-gradient(left, #28ECC3 0%, #0BC9A1 100%);
}
body .container input {
  display: none;
}
body .container input:checked + label .container_button span span {
  opacity: 0;
  left: 40px;
}
body .container input:checked + label .container_button span i {
  opacity: 0;
  left: -40px;
}
body .container input:checked + label .container_button {
  -webkit-animation: base 0.96s 0.12s cubic-bezier(0.755, -0.245, 0.175, 1) forwards, pulse 0.5s forwards, final 0.3s 3.6s forwards;
          animation: base 0.96s 0.12s cubic-bezier(0.755, -0.245, 0.175, 1) forwards, pulse 0.5s forwards, final 0.3s 3.6s forwards;
}
body .container input:checked + label .container_button .downloading {
  -webkit-animation: pop .2s 1s forwards,popout .2s 3.4s forwards;
          animation: pop .2s 1s forwards,popout .2s 3.4s forwards;
}
body .container input:checked + label .container_button .d_icon {
  -webkit-animation: d_icon .6s 1s forwards,wobble .4s 3.58s forwards,iconout .14s 4.45s forwards;
          animation: d_icon .6s 1s forwards,wobble .4s 3.58s forwards,iconout .14s 4.45s forwards;
}
body .container input:checked + label .container_button .complete {
  -webkit-animation: d_icon .14s 4.55s forwards;
          animation: d_icon .14s 4.55s forwards;
}
body .container input:checked + label .container_button .point:nth-of-type(1) {
  -webkit-animation: dot 0.14s 4.0038461538s forwards;
          animation: dot 0.14s 4.0038461538s forwards;
}
body .container input:checked + label .container_button .point:nth-of-type(2) {
  -webkit-animation: dot 0.14s 4.0076923077s forwards;
          animation: dot 0.14s 4.0076923077s forwards;
}
body .container input:checked + label .container_button .point:nth-of-type(3) {
  -webkit-animation: dot 0.14s 4.0115384615s forwards;
          animation: dot 0.14s 4.0115384615s forwards;
}
body .container input:checked + label .container_button .point:nth-of-type(4) {
  -webkit-animation: dot 0.14s 4.0153846154s forwards;
          animation: dot 0.14s 4.0153846154s forwards;
}
body .container input:checked + label .container_button .point:nth-of-type(5) {
  -webkit-animation: dot 0.14s 4.0192307692s forwards;
          animation: dot 0.14s 4.0192307692s forwards;
}
body .container input:checked + label .container_button .point:nth-of-type(6) {
  -webkit-animation: dot 0.14s 4.0230769231s forwards;
          animation: dot 0.14s 4.0230769231s forwards;
}
body .container input:checked + label .container_button .point:nth-of-type(7) {
  -webkit-animation: dot 0.14s 4.0269230769s forwards;
          animation: dot 0.14s 4.0269230769s forwards;
}
body .container input:checked + label .container_button .point:nth-of-type(8) {
  -webkit-animation: dot 0.14s 4.0307692308s forwards;
          animation: dot 0.14s 4.0307692308s forwards;
}
body .container input:checked + label .container_button .point:nth-of-type(9) {
  -webkit-animation: dot 0.14s 4.0346153846s forwards;
          animation: dot 0.14s 4.0346153846s forwards;
}
body .container input:checked + label .container_button .point:nth-of-type(10) {
  -webkit-animation: dot 0.14s 4.0384615385s forwards;
          animation: dot 0.14s 4.0384615385s forwards;
}
body .container input:checked + label .container_button .point:nth-of-type(11) {
  -webkit-animation: dot 0.14s 4.0423076923s forwards;
          animation: dot 0.14s 4.0423076923s forwards;
}
body .container input:checked + label .container_button .point:nth-of-type(12) {
  -webkit-animation: dot 0.14s 4.0461538462s forwards;
          animation: dot 0.14s 4.0461538462s forwards;
}
body .container input:checked + label .container_button .point:nth-of-type(13) {
  -webkit-animation: dot 0.14s 4.05s forwards;
          animation: dot 0.14s 4.05s forwards;
}
body .container input:checked + label .container_button .point:nth-of-type(14) {
  -webkit-animation: dot 0.14s 4.0538461538s forwards;
          animation: dot 0.14s 4.0538461538s forwards;
}
body .container input:checked + label .container_button .point:nth-of-type(15) {
  -webkit-animation: dot 0.14s 4.0576923077s forwards;
          animation: dot 0.14s 4.0576923077s forwards;
}
body .container input:checked + label .container_button .point:nth-of-type(16) {
  -webkit-animation: dot 0.14s 4.0615384615s forwards;
          animation: dot 0.14s 4.0615384615s forwards;
}
body .container input:checked + label .container_button .point:nth-of-type(17) {
  -webkit-animation: dot 0.14s 4.0653846154s forwards;
          animation: dot 0.14s 4.0653846154s forwards;
}
body .container input:checked + label .container_button .point:nth-of-type(18) {
  -webkit-animation: dot 0.14s 4.0692307692s forwards;
          animation: dot 0.14s 4.0692307692s forwards;
}
body .container input:checked + label .container_button .point:nth-of-type(19) {
  -webkit-animation: dot 0.14s 4.0730769231s forwards;
          animation: dot 0.14s 4.0730769231s forwards;
}
body .container input:checked + label .container_button .point:nth-of-type(20) {
  -webkit-animation: dot 0.14s 4.0769230769s forwards;
          animation: dot 0.14s 4.0769230769s forwards;
}
body .container input:checked + label .container_button .point:nth-of-type(21) {
  -webkit-animation: dot 0.14s 4.0807692308s forwards;
          animation: dot 0.14s 4.0807692308s forwards;
}
body .container input:checked + label .container_button .point:nth-of-type(22) {
  -webkit-animation: dot 0.14s 4.0846153846s forwards;
          animation: dot 0.14s 4.0846153846s forwards;
}
body .container input:checked + label .container_button .point:nth-of-type(23) {
  -webkit-animation: dot 0.14s 4.0884615385s forwards;
          animation: dot 0.14s 4.0884615385s forwards;
}
body .container input:checked + label .container_button .point:nth-of-type(24) {
  -webkit-animation: dot 0.14s 4.0923076923s forwards;
          animation: dot 0.14s 4.0923076923s forwards;
}
body .container input:checked + label .container_button .point:nth-of-type(25) {
  -webkit-animation: dot 0.14s 4.0961538462s forwards;
          animation: dot 0.14s 4.0961538462s forwards;
}
body .container input:checked + label .container_button .point:nth-of-type(26) {
  -webkit-animation: dot 0.14s 4.1s forwards;
          animation: dot 0.14s 4.1s forwards;
}
body .container input:checked + label .container_button .point:nth-of-type(27) {
  -webkit-animation: dot 0.14s 4.1038461538s forwards;
          animation: dot 0.14s 4.1038461538s forwards;
}
body .container input:checked + label .container_button .point:nth-of-type(28) {
  -webkit-animation: dot 0.14s 4.1076923077s forwards;
          animation: dot 0.14s 4.1076923077s forwards;
}
body .container input:checked + label .container_button .point:nth-of-type(29) {
  -webkit-animation: dot 0.14s 4.1115384615s forwards;
          animation: dot 0.14s 4.1115384615s forwards;
}
body .container input:checked + label .container_button .point:nth-of-type(30) {
  -webkit-animation: dot 0.14s 4.1153846154s forwards;
          animation: dot 0.14s 4.1153846154s forwards;
}
body .container input:checked + label .container_button .point:nth-of-type(31) {
  -webkit-animation: dot 0.14s 4.1192307692s forwards;
          animation: dot 0.14s 4.1192307692s forwards;
}
body .container input:checked + label .container_button .point:nth-of-type(32) {
  -webkit-animation: dot 0.14s 4.1230769231s forwards;
          animation: dot 0.14s 4.1230769231s forwards;
}
body .container input:checked + label .container_button .point:nth-of-type(33) {
  -webkit-animation: dot 0.14s 4.1269230769s forwards;
          animation: dot 0.14s 4.1269230769s forwards;
}
body .container input:checked + label .container_button .point:nth-of-type(34) {
  -webkit-animation: dot 0.14s 4.1307692308s forwards;
          animation: dot 0.14s 4.1307692308s forwards;
}
body .container input:checked + label .container_button .point:nth-of-type(35) {
  -webkit-animation: dot 0.14s 4.1346153846s forwards;
          animation: dot 0.14s 4.1346153846s forwards;
}
body .container input:checked + label .container_button .point:nth-of-type(36) {
  -webkit-animation: dot 0.14s 4.1384615385s forwards;
          animation: dot 0.14s 4.1384615385s forwards;
}
body .container input:checked + label .container_button:hover {
  box-shadow: none;
}
body .container input:checked + label .container_button__bar {
  -webkit-animation: bar 2.6s 1.14s cubic-bezier(0.19, 1, 0.22, 1) forwards, barout 0.3s 3.2s forwards;
          animation: bar 2.6s 1.14s cubic-bezier(0.19, 1, 0.22, 1) forwards, barout 0.3s 3.2s forwards;
}
body .container label {
  cursor: pointer;
}
body .container label .downloading {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  top: 28px;
  opacity: 0;
  font-size: 12px;
}
body .container label .point {
  opacity: 0;
  width: 2px;
  height: 6px;
  -webkit-transform-origin: 60px 0px;
          transform-origin: 60px 0px;
  background: #28ECC3;
  border-radius: 10px;
  position: absolute;
  left: -11px;
  top: 50px;
}
body .container label .point:nth-of-type(1) {
  -webkit-transform: rotate(10deg);
          transform: rotate(10deg);
}
body .container label .point:nth-of-type(2) {
  -webkit-transform: rotate(20deg);
          transform: rotate(20deg);
}
body .container label .point:nth-of-type(3) {
  -webkit-transform: rotate(30deg);
          transform: rotate(30deg);
}
body .container label .point:nth-of-type(4) {
  -webkit-transform: rotate(40deg);
          transform: rotate(40deg);
}
body .container label .point:nth-of-type(5) {
  -webkit-transform: rotate(50deg);
          transform: rotate(50deg);
}
body .container label .point:nth-of-type(6) {
  -webkit-transform: rotate(60deg);
          transform: rotate(60deg);
}
body .container label .point:nth-of-type(7) {
  -webkit-transform: rotate(70deg);
          transform: rotate(70deg);
}
body .container label .point:nth-of-type(8) {
  -webkit-transform: rotate(80deg);
          transform: rotate(80deg);
}
body .container label .point:nth-of-type(9) {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}
body .container label .point:nth-of-type(10) {
  -webkit-transform: rotate(100deg);
          transform: rotate(100deg);
}
body .container label .point:nth-of-type(11) {
  -webkit-transform: rotate(110deg);
          transform: rotate(110deg);
}
body .container label .point:nth-of-type(12) {
  -webkit-transform: rotate(120deg);
          transform: rotate(120deg);
}
body .container label .point:nth-of-type(13) {
  -webkit-transform: rotate(130deg);
          transform: rotate(130deg);
}
body .container label .point:nth-of-type(14) {
  -webkit-transform: rotate(140deg);
          transform: rotate(140deg);
}
body .container label .point:nth-of-type(15) {
  -webkit-transform: rotate(150deg);
          transform: rotate(150deg);
}
body .container label .point:nth-of-type(16) {
  -webkit-transform: rotate(160deg);
          transform: rotate(160deg);
}
body .container label .point:nth-of-type(17) {
  -webkit-transform: rotate(170deg);
          transform: rotate(170deg);
}
body .container label .point:nth-of-type(18) {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
body .container label .point:nth-of-type(19) {
  -webkit-transform: rotate(190deg);
          transform: rotate(190deg);
}
body .container label .point:nth-of-type(20) {
  -webkit-transform: rotate(200deg);
          transform: rotate(200deg);
}
body .container label .point:nth-of-type(21) {
  -webkit-transform: rotate(210deg);
          transform: rotate(210deg);
}
body .container label .point:nth-of-type(22) {
  -webkit-transform: rotate(220deg);
          transform: rotate(220deg);
}
body .container label .point:nth-of-type(23) {
  -webkit-transform: rotate(230deg);
          transform: rotate(230deg);
}
body .container label .point:nth-of-type(24) {
  -webkit-transform: rotate(240deg);
          transform: rotate(240deg);
}
body .container label .point:nth-of-type(25) {
  -webkit-transform: rotate(250deg);
          transform: rotate(250deg);
}
body .container label .point:nth-of-type(26) {
  -webkit-transform: rotate(260deg);
          transform: rotate(260deg);
}
body .container label .point:nth-of-type(27) {
  -webkit-transform: rotate(270deg);
          transform: rotate(270deg);
}
body .container label .point:nth-of-type(28) {
  -webkit-transform: rotate(280deg);
          transform: rotate(280deg);
}
body .container label .point:nth-of-type(29) {
  -webkit-transform: rotate(290deg);
          transform: rotate(290deg);
}
body .container label .point:nth-of-type(30) {
  -webkit-transform: rotate(300deg);
          transform: rotate(300deg);
}
body .container label .point:nth-of-type(31) {
  -webkit-transform: rotate(310deg);
          transform: rotate(310deg);
}
body .container label .point:nth-of-type(32) {
  -webkit-transform: rotate(320deg);
          transform: rotate(320deg);
}
body .container label .point:nth-of-type(33) {
  -webkit-transform: rotate(330deg);
          transform: rotate(330deg);
}
body .container label .point:nth-of-type(34) {
  -webkit-transform: rotate(340deg);
          transform: rotate(340deg);
}
body .container label .point:nth-of-type(35) {
  -webkit-transform: rotate(350deg);
          transform: rotate(350deg);
}
body .container label .point:nth-of-type(36) {
  -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
}
body .container label .complete {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  top: 50%;
  z-index: 2;
  -webkit-transform: translateY(-50%) scale(0);
          transform: translateY(-50%) scale(0);
  font-size: 32px;
}
body .container label .d_icon {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  top: 50%;
  z-index: 2;
  -webkit-transform: translateY(-50%) scale(0);
          transform: translateY(-50%) scale(0);
  font-size: 32px;
}
body .container label span {
  opacity: 1;
  transition: all .18s;
  position: relative;
  top: -3px;
}
body .container label span i {
  font-size: 22px;
  margin-right: 6px;
  position: relative;
  left: 0;
  transition: all .2s;
  top: 3px;
}
body .container label span span {
  left: 0;
  top: 0px;
  transition: all .2s;
}
body .container label span .large {
  position: absolute;
  opacity: 0;
  transition: all .3s .1s;
  left: -59px;
  top: -21px;
  font-size: 60px;
}

@-webkit-keyframes base {
  0% {
    border: none;
  }
  50% {
    width: 20px;
    height: 40px;
    background: #28ECC3;
    height: 16px;
    border: none;
  }
  75% {
    background: rgba(0, 0, 0, 0.34);
    border: none;
  }
  76% {
    width: 405px;
    height: 16px;
    background: rgba(0, 0, 0, 0.34);
    border: none;
  }
  88% {
    width: 384px;
    height: 16px;
    background: rgba(0, 0, 0, 0.34);
    border: none;
  }
  100% {
    width: 400px;
    height: 16px;
    background: rgba(0, 0, 0, 0.34);
    border: none;
  }
}

@keyframes base {
  0% {
    border: none;
  }
  50% {
    width: 20px;
    height: 40px;
    background: #28ECC3;
    height: 16px;
    border: none;
  }
  75% {
    background: rgba(0, 0, 0, 0.34);
    border: none;
  }
  76% {
    width: 405px;
    height: 16px;
    background: rgba(0, 0, 0, 0.34);
    border: none;
  }
  88% {
    width: 384px;
    height: 16px;
    background: rgba(0, 0, 0, 0.34);
    border: none;
  }
  100% {
    width: 400px;
    height: 16px;
    background: rgba(0, 0, 0, 0.34);
    border: none;
  }
}
@-webkit-keyframes bar {
  100% {
    width: 98%;
  }
}
@keyframes bar {
  100% {
    width: 98%;
  }
}
@-webkit-keyframes pulse {
  0% {
    box-shadow: 0px 0px 0px 6px rgba(0, 0, 0, 0.08);
  }
  100% {
    box-shadow: 0px 0px 0px 1920px rgba(0, 0, 0, 0);
  }
}
@keyframes pulse {
  0% {
    box-shadow: 0px 0px 0px 6px rgba(0, 0, 0, 0.08);
  }
  100% {
    box-shadow: 0px 0px 0px 1920px rgba(0, 0, 0, 0);
  }
}
@-webkit-keyframes pop {
  100% {
    opacity: 1;
    top: 23px;
  }
}
@keyframes pop {
  100% {
    opacity: 1;
    top: 23px;
  }
}
@-webkit-keyframes popout {
  0% {
    opacity: 1;
    top: 23px;
  }
  100% {
    opacity: 0;
    top: 28px;
  }
}
@keyframes popout {
  0% {
    opacity: 1;
    top: 23px;
  }
  100% {
    opacity: 0;
    top: 28px;
  }
}
@-webkit-keyframes barout {
  100% {
    opacity: 0;
  }
}
@keyframes barout {
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes final {
  0% {
    background: rgba(0, 0, 0, 0.34);
  }
  50% {
    background: rgba(0, 0, 0, 0.34);
    width: 100px;
    height: 100px;
    box-shadow: none;
  }
  100% {
    width: 100px;
    height: 100px;
    background: none;
  }
}
@keyframes final {
  0% {
    background: rgba(0, 0, 0, 0.34);
  }
  50% {
    background: rgba(0, 0, 0, 0.34);
    width: 100px;
    height: 100px;
    box-shadow: none;
  }
  100% {
    width: 100px;
    height: 100px;
    background: none;
  }
}
@-webkit-keyframes d_icon {
  0% {
    -webkit-transform: translateY(-50%) scale(0);
            transform: translateY(-50%) scale(0);
  }
  25% {
    -webkit-transform: translateY(-50%) scale(1.2);
            transform: translateY(-50%) scale(1.2);
  }
  50% {
    -webkit-transform: translateY(-50%) scale(0.9);
            transform: translateY(-50%) scale(0.9);
  }
  75% {
    -webkit-transform: translateY(-50%) scale(1.1);
            transform: translateY(-50%) scale(1.1);
  }
  100% {
    -webkit-transform: translateY(-50%) scale(1);
            transform: translateY(-50%) scale(1);
  }
}
@keyframes d_icon {
  0% {
    -webkit-transform: translateY(-50%) scale(0);
            transform: translateY(-50%) scale(0);
  }
  25% {
    -webkit-transform: translateY(-50%) scale(1.2);
            transform: translateY(-50%) scale(1.2);
  }
  50% {
    -webkit-transform: translateY(-50%) scale(0.9);
            transform: translateY(-50%) scale(0.9);
  }
  75% {
    -webkit-transform: translateY(-50%) scale(1.1);
            transform: translateY(-50%) scale(1.1);
  }
  100% {
    -webkit-transform: translateY(-50%) scale(1);
            transform: translateY(-50%) scale(1);
  }
}
@-webkit-keyframes iconout {
  0% {
    -webkit-transform: translateY(-50%) scale(1);
            transform: translateY(-50%) scale(1);
  }
  100% {
    -webkit-transform: translateY(-50%) scale(0);
            transform: translateY(-50%) scale(0);
  }
}
@keyframes iconout {
  0% {
    -webkit-transform: translateY(-50%) scale(1);
            transform: translateY(-50%) scale(1);
  }
  100% {
    -webkit-transform: translateY(-50%) scale(0);
            transform: translateY(-50%) scale(0);
  }
}
@-webkit-keyframes dot {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes dot {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes wobble {
  0% {
    -webkit-transform: translateY(-50%) scale(1);
            transform: translateY(-50%) scale(1);
  }
  25% {
    -webkit-transform: translateY(-50%) scale(1.2);
            transform: translateY(-50%) scale(1.2);
  }
  50% {
    -webkit-transform: translateY(-50%) scale(0.9);
            transform: translateY(-50%) scale(0.9);
  }
  75% {
    -webkit-transform: translateY(-50%) scale(1.1);
            transform: translateY(-50%) scale(1.1);
  }
  100% {
    -webkit-transform: translateY(-50%) scale(1);
            transform: translateY(-50%) scale(1);
  }
}
@keyframes wobble {
  0% {
    -webkit-transform: translateY(-50%) scale(1);
            transform: translateY(-50%) scale(1);
  }
  25% {
    -webkit-transform: translateY(-50%) scale(1.2);
            transform: translateY(-50%) scale(1.2);
  }
  50% {
    -webkit-transform: translateY(-50%) scale(0.9);
            transform: translateY(-50%) scale(0.9);
  }
  75% {
    -webkit-transform: translateY(-50%) scale(1.1);
            transform: translateY(-50%) scale(1.1);
  }
  100% {
    -webkit-transform: translateY(-50%) scale(1);
            transform: translateY(-50%) scale(1);
  }
}

Mon HTML :

 <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css'>

      <link rel="stylesheet" href="dist/style.css">

  <div class='container'>
  <input id='funky' type='checkbox'>
  <label for='funky'>
    <div class='container_button'>
      <span><i class="icon ion-code-download"></i> <span>Download</span></span>
      <span class="downloading">Downloading</span>
      <i class="icon d_icon ion-cube"></i>
      <i class="icon complete ion-checkmark-round"></i>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='container_button__bar'></div>
    </div>
  </label>
</div>

    <script  src="dist/script.js"></script>

Si quelqu'un peut m'aider et me dire comment télécharger un fichier via ce code. Merci

Salut,

ton code css ne nous est pas utile et dans ton code html aucune trace d'un <a href="href="http://monsite.fr/fichier.exe"">Mon fichier</a>

ça répond à ta question ?

Non ça ne répond pas a ma question, effectivement sur mon code j'ai oublié de mettre les essais que j'ai fais et entre autre un "href="http://monsite.fr/fichier.exe".

Vous pouvez essayer si vous ca marche svp ? Moi non.

Si quelqu'un peut m'aider ce serait super...

Ok mais tu n'a rien dans code html qui pourrait lancer un téléchargement...

Aucun <button> ou <a>.

 <input id="funky" type="checkbox" onClick="window.location.href"='https://monfichier.exe'>

Ca ne marche pas non plus... Peut tu s'il te plait, essayer d'ouvrir un téléchargement. Et de récupérer le code CSS pour mieux comprendre. Merci.

Bonjour, pour un fichier .exe le navigateur ne sais pas quoi en faire, alors il propose de télécharger le fichier. Tu peux écrire un simple lien vers ce fichier et cela fonctionnera. Si cela ne fonctionne pas c'est que le fichier .exe n'est pas à l'endroit indiqué dans le href de la balise <a>. Vérifie le chemin du fichier.

Si c'est un fichier en ligne, quelle est son URL?

Tu peux accessoirement utiliser l'attribut download sur l'élément <a>.

http://www.trucsweb.com/tutoriels/html/html5-download/

-
Edité par AbcAbc6 9 juin 2019 à 0:32:42

........................................................

Ca ne marche pas ! Quelqu'un peut t'il me donner une réponse qu'il a essayer svp ?

Le Href ne marche pas sur l'animation, éffectivement si je fais click droit ouvrir dans un nouvel onglet sur le bouton ca me lance bien le téléchargement mais ca ne marche pas quand je clique, ca lance l'animation mais je ne télécharge jamais mon fichier. Mais quand je passe ma souris également ca montre bien que ca permet de télécharger un fichier, mais ca ne le fais pas.

>> Ca ne marche pas !

Bonjour, ce n'est pas avec ça que tu nous aide à t'aider!

OU as tu ajouté dans ce  code l'élément <a>?

Dans le code que tu as recopier il y a une erreur que tu peux voir en vérifiant ton code au validateur https://validator.w3.org/#validate_by_input

La balise <div> ne peut être enfant de <label>. Corrige cela et écrit un code valide; TON code, ce serra plus facile pour toi que de recopier des erreurs.

Que ne comprends tu pas dans ce que tu as recopier?

>> Que ne comprends tu pas dans ce que tu as recopier

Pas grand chose, le problème n'est pas la. Seulement je ne comprend pas pourquoi ca ne marche pas ce que je fais.

Je n'arrive pas a comprendre pourquoi vous ne voulez pas essayer pour m'aider.

Je vous envois un exemple de ce que j'ai essayé avec le href :

<a href="programme.exe" >
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css'>

      <link rel="stylesheet" href="dist/style.css">

  <div class='container'>
  <input id="funky" type="checkbox">
  <label for='funky'>
    <div class='container_button'>
      <span><i class="icon ion-code-download"></i> <span>Download</span></span>
      <span class="downloading">Downloading</span>
      <i class="icon d_icon ion-cube"></i>
      <i class="icon complete ion-checkmark-round"></i>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='container_button__bar'></div>
    </div>
    </a>
  </label>
  </div>

    <script  src="dist/script.js"></script>

Ici si je l'ouvre dans un nouvelle onglet ca marche mais pas quand je clique.

>> Je n'arrive pas a comprendre pourquoi vous ne voulez pas essayer pour m'aider.

j'ai testé ton premier code, c'est une belle animation, mais je ne pense pas que te donner un code tout fait t'aidera en quoi que ce soit;

>> Seulement je ne comprend pas pourquoi ca ne marche pas ce que je fais.

Ton code n'est pas valide, passe le au validateur et corrige les erreurs. Quelques lectures :

• https://openweb.eu.org/articles/pourquoi_standards
• https://openclassrooms.com/fr/courses/1086916-la-semantique
• D'autre lectures.

Au vu de ton dernier code, je pense qu'il serrais plus qu’utile de (re)voir  les bases du HTML. Il y à un cours HTML5/CSS3 sur ce site pour t'y aider.

Ton imbrication de balise n'est pas correcte, la balise <link> doit ce trouver dans le <head> donc ne peut être incluse dans le lien; Tu ouvres la balise <a> avant  la <div id="container" > et tu la referme avant la fermeture de cette div. En HTML c'est <balise1><balise2>texte</balise2></balise1>.

De plus tu n'as pas tenu compte de l'erreur que je t'ai indiquée auparavant concernant le <div> et le <label>.

==> passe ton code au validateur et corrige les erreurs, si tu ne comprends pas la communauté est la pour explications.

ÉDIT: Et si tu placerais la chexbox dans un formulaire et détecter le click sur cet élément en JS puis envoyer vers le fichier après le temps de l’animation. Car si tu clique sur le lien, le fichier ce télécharge immédiatement après, Je présume que tu souhaite voir l'animation CSS avant le téléchargement. j'utiliserais du JS pour ce faire.    

-
Edité par AbcAbc6 9 juin 2019 à 18:37:49

Vous voulez apprendre a un singe de grimper aux arbres ?

Vos remarque comme "mais je ne pense pas que te donner un code tout fait t'aidera en quoi que ce soit" sont aussi inutile que ma 1ère phrase.

Problème résolu, on est quand même très souvent mieu servi que par sois même.

Bonjour,

Je suis complètement choqué de ton comportement ..

Tu es sur un forum d'entraide, les membres sont bénévoles et ne sont pas obligé de t'aider

La prochaine fois pas la peine de poster quoi que ce soit !

On peut apprendre au singe à écrire par contre...

Salut,

Un simple attribut "download" dans une balise <a> suffit.

<a href="chemin" download></a>

ArthurChaigne2 a écrit:

On peut apprendre au singe à écrire par contre...

On peut même apprendre aux singes de jouer au jeu de poche 

Bonne journée

Tout est dans l'UI à ce niveau là

Ahahah

exen a écrit:

Tout est dans l'UI à ce niveau là

UI ?

Bonjour, je pense que l'on va en rester là.

Je ferme ce sujet.