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

Machimina Waves

Machimina Waves

By hexapode
$.Deferred done() vs then()

$.Deferred done() vs then()

By ruudud
Animated SVG Lines

Animated SVG Lines

By DesignyourCode
CMT3-opdracht8

CMT3-opdracht8

By CharltonAbney
Newest Blender Update

Newest Blender Update

By Elle_kennedy
A Pen by Scrabble

A Pen by Scrabble

By Scrabble
ExamplesEdit

ExamplesEdit

By danmaslo
modal REGIONS bootstrap test (responsive)

modal REGIONS bootstrap test (responsive)

By umsteadSSB
© 2018 - Copyright CodeSeek.co
contact email