Button Click Example

Creates an input button and assigns a click event to it.

HTML

<body>
<div>
  First buttons border is red, background blue, at half opacity mixes to create purple.
</div>
<div>
  <input type="button" class="opacityborder" value="Click Me"/>
</div>
<div>
  Second buttons border is red, background blue, at no opacity.
</div>  
<div>
  <input type="button" class="solidborder" value="Click Me"/>
</div>
<div>
Use a tool <a href="https://www.hexcolortool.com/#e84545,0.5">like this</a> to generate rgba colors
</div>
</body>

CSS

.opacityborder {
  margin-top: 8px;
  margin-left: 16px;
  margin-bottom: 16px;
  padding: 10px;
  border:10px solid rgba(232, 69, 69,.5); /* notice the .5 */
  border-radius: 9px;
  background-color: blue;
}

.solidborder {
  margin-top: 8px;
  margin-left: 16px;
  margin-bottom: 16px;
  padding: 10px;
  border:10px solid rgba(232, 69, 69,1); /* notice the 1 */
  border-radius: 9px;
  background-color: blue;
}