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

qunit v1.0

qunit v1.0

By black-black-cat
US Envelope With border

US Envelope With border

By msegura77
Button

Button

By Raphic
coserosa-modal

coserosa-modal

By nOttenga
A Pen by Pushkaraj Shinde

A Pen by Pushkaraj Shinde

By pshkrjshnde
Mask Watch

Mask Watch

By azamara
A Pen by James

A Pen by James

By JZersche
Touchpoint table playground #5 (Test Data w/ Curved Connectors)

Touchpoint table playground #5 (Test Data w/ Curved Connectors)

By vinguerra
© 2018 - Copyright CodeSeek.co
contact email