Inline JavaScript HTML style Ctrl Alt Delete keys

In this example below you will see how to do a Inline JavaScript HTML style Ctrl Alt Delete keys with some HTML / CSS and Javascript

Inline HTML style Ctrl Alt Delete keys. Keys appear responsive on hover.

Thumbnail
This awesome code was written by 321, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 321 ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Inline JavaScript HTML style Ctrl Alt Delete keys</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <kbd class="keyboard-key nowrap" onMouseOver="this.style.boxShadow='0.01em 0.02em 0.02em #000', this.style.cursor='pointer'"
   onMouseOut="this.style.boxShadow='0.18em 0.28em 0.28em #000'" style="border: 1px solid #333; -moz-border-radius: 0.2em; -webkit-border-radius: 0.2em; border-radius: 0.2em; -moz-box-shadow: 0.18em 0.28em 0.28em #000; -webkit-box-shadow: 0.18em 0.28em 0.28em #000; box-shadow: 0.18em 0.28em 0.28em #000; background: #4c4c4c;
background: -moz-linear-gradient(left,  #4c4c4c 0%, #000000 0%, #666666 15%, #595959 19%, #595959 19%, #595959 21%, #d3d3d3 59%, #d3d3d3 80%, #2b2b2b 88%, #3f3f3f 94%, #111111 100%, #131313 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#4c4c4c), color-stop(0%,#000000), color-stop(15%,#666666), color-stop(19%,#595959), color-stop(19%,#595959), color-stop(21%,#595959), color-stop(59%,#d3d3d3), color-stop(80%,#d3d3d3), color-stop(88%,#2b2b2b), color-stop(94%,#3f3f3f), color-stop(100%,#111111), color-stop(100%,#131313));
background: -webkit-linear-gradient(left,  #4c4c4c 0%,#000000 0%,#666666 15%,#595959 19%,#595959 19%,#595959 21%,#d3d3d3 59%,#d3d3d3 80%,#2b2b2b 88%,#3f3f3f 94%,#111111 100%,#131313 100%);
background: -o-linear-gradient(left,  #4c4c4c 0%,#000000 0%,#666666 15%,#595959 19%,#595959 19%,#595959 21%,#d3d3d3 59%,#d3d3d3 80%,#2b2b2b 88%,#3f3f3f 94%,#111111 100%,#131313 100%);
background: -ms-linear-gradient(left,  #4c4c4c 0%,#000000 0%,#666666 15%,#595959 19%,#595959 19%,#595959 21%,#d3d3d3 59%,#d3d3d3 80%,#2b2b2b 88%,#3f3f3f 94%,#111111 100%,#131313 100%);
background: linear-gradient(to right,  #4c4c4c 0%,#000000 0%,#666666 15%,#595959 19%,#595959 19%,#595959 21%,#d3d3d3 59%,#d3d3d3 80%,#2b2b2b 88%,#3f3f3f 94%,#111111 100%,#131313 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=1 );
 padding: 0.15em 0.6em; font-family: Arial; font-size: 0.85em;">Ctrl</kbd> + <kbd class="keyboard-key nowrap" onMouseOver="this.style.boxShadow='0.01em 0.02em 0.02em #000', this.style.cursor='pointer'"
   onMouseOut="this.style.boxShadow='0.18em 0.28em 0.28em #000'" style="border: 1px solid #333; -moz-border-radius: 0.2em; -webkit-border-radius: 0.2em; border-radius: 0.2em; -moz-box-shadow: 0.18em 0.28em 0.28em #000; -webkit-box-shadow: 0.18em 0.28em 0.28em #000; box-shadow: 0.18em 0.28em 0.28em #000; background: #4c4c4c;
background: -moz-linear-gradient(left,  #4c4c4c 0%, #000000 0%, #666666 15%, #595959 19%, #595959 19%, #595959 21%, #d3d3d3 59%, #d3d3d3 80%, #2b2b2b 88%, #3f3f3f 94%, #111111 100%, #131313 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#4c4c4c), color-stop(0%,#000000), color-stop(15%,#666666), color-stop(19%,#595959), color-stop(19%,#595959), color-stop(21%,#595959), color-stop(59%,#d3d3d3), color-stop(80%,#d3d3d3), color-stop(88%,#2b2b2b), color-stop(94%,#3f3f3f), color-stop(100%,#111111), color-stop(100%,#131313));
background: -webkit-linear-gradient(left,  #4c4c4c 0%,#000000 0%,#666666 15%,#595959 19%,#595959 19%,#595959 21%,#d3d3d3 59%,#d3d3d3 80%,#2b2b2b 88%,#3f3f3f 94%,#111111 100%,#131313 100%);
background: -o-linear-gradient(left,  #4c4c4c 0%,#000000 0%,#666666 15%,#595959 19%,#595959 19%,#595959 21%,#d3d3d3 59%,#d3d3d3 80%,#2b2b2b 88%,#3f3f3f 94%,#111111 100%,#131313 100%);
background: -ms-linear-gradient(left,  #4c4c4c 0%,#000000 0%,#666666 15%,#595959 19%,#595959 19%,#595959 21%,#d3d3d3 59%,#d3d3d3 80%,#2b2b2b 88%,#3f3f3f 94%,#111111 100%,#131313 100%);
background: linear-gradient(to right,  #4c4c4c 0%,#000000 0%,#666666 15%,#595959 19%,#595959 19%,#595959 21%,#d3d3d3 59%,#d3d3d3 80%,#2b2b2b 88%,#3f3f3f 94%,#111111 100%,#131313 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=1 );
 padding: 0.15em 0.6em; font-family: Arial; font-size: 0.85em;"> Alt</kbd> + <kbd class="keyboard-key nowrap" onMouseOver="this.style.boxShadow='0.01em 0.02em 0.02em #000', this.style.cursor='pointer'"
   onMouseOut="this.style.boxShadow='0.18em 0.28em 0.28em #000'" style="border: 1px solid #333; -moz-border-radius: 0.2em; -webkit-border-radius: 0.2em; border-radius: 0.2em; -moz-box-shadow: 0.18em 0.28em 0.28em #000; -webkit-box-shadow: 0.18em 0.28em 0.28em #000; box-shadow: 0.18em 0.28em 0.28em #000; background: #4c4c4c;
background: -moz-linear-gradient(left,  #4c4c4c 0%, #000000 0%, #666666 15%, #595959 19%, #595959 19%, #595959 21%, #d3d3d3 59%, #d3d3d3 80%, #2b2b2b 88%, #3f3f3f 94%, #111111 100%, #131313 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#4c4c4c), color-stop(0%,#000000), color-stop(15%,#666666), color-stop(19%,#595959), color-stop(19%,#595959), color-stop(21%,#595959), color-stop(59%,#d3d3d3), color-stop(80%,#d3d3d3), color-stop(88%,#2b2b2b), color-stop(94%,#3f3f3f), color-stop(100%,#111111), color-stop(100%,#131313));
background: -webkit-linear-gradient(left,  #4c4c4c 0%,#000000 0%,#666666 15%,#595959 19%,#595959 19%,#595959 21%,#d3d3d3 59%,#d3d3d3 80%,#2b2b2b 88%,#3f3f3f 94%,#111111 100%,#131313 100%);
background: -o-linear-gradient(left,  #4c4c4c 0%,#000000 0%,#666666 15%,#595959 19%,#595959 19%,#595959 21%,#d3d3d3 59%,#d3d3d3 80%,#2b2b2b 88%,#3f3f3f 94%,#111111 100%,#131313 100%);
background: -ms-linear-gradient(left,  #4c4c4c 0%,#000000 0%,#666666 15%,#595959 19%,#595959 19%,#595959 21%,#d3d3d3 59%,#d3d3d3 80%,#2b2b2b 88%,#3f3f3f 94%,#111111 100%,#131313 100%);
background: linear-gradient(to right,  #4c4c4c 0%,#000000 0%,#666666 15%,#595959 19%,#595959 19%,#595959 21%,#d3d3d3 59%,#d3d3d3 80%,#2b2b2b 88%,#3f3f3f 94%,#111111 100%,#131313 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=1 );
 padding: 0.15em 0.25em; font-family: Arial; font-size: 0.85em;"> Delete</kbd>
  
  

</body>

</html>


/*Downloaded from https://www.codeseek.co/321/inline-javascript-html-style-ctrl-alt-delete-keys-qgnBj */
body {
  text-align: center;
  margin: auto;
  margin-top: 10%;
}

Comments

More from 321

A Pen by Ethan Marshall

A Pen by Ethan Marshall

By 321
A Pen by Ethan Marshall

A Pen by Ethan Marshall

By 321
A Pen by Ethan Marshall

A Pen by Ethan Marshall

By 321
A Pen by Ethan Marshall

A Pen by Ethan Marshall

By 321

You Might Also Like

Material Design Cards

Material Design Cards

By berkantfidan
TSW Tremolo

TSW Tremolo

By stuartmemo
SAMPLE World Tuna Day SEND: 5.2.18

SAMPLE World Tuna Day SEND: 5.2.18

By mhuelga
Lichtenstein&#x2019;s Lunch

Lichtenstein’s Lunch

By januff
Slider manual puro css

Slider manual puro css

By Kseso
Portfolio Page

Portfolio Page

By RocketJory
Latest News Sample

Latest News Sample

By abrahamjuliot
A Pen by AvraamMavridis

A Pen by AvraamMavridis

By AvraamMavridis
© 2018 - Copyright CodeSeek.co
contact email