Css Smooth Transition on Mouse Hover

Css Smooth Transition on Hover effect is a nice and smooth way to handle transform effects like scales, skew, rotate and proportions. Here is how to apply smooth transitions to html pages usings css classes when an element is hovered using the mouse.

<!DOCTYPE html>
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">
.btn {
  background-color: #f4511e;
  border: none;
  color: white;
  padding: 16px 32px;
  text-align: center;
  font-size: 16px;
  margin: 4px 2px;
  opacity: 0.6;
  transition: 0.3s;
.btn:hover {opacity: 1}
<h2>Fading Buttons - \"Fade in Effect\"</h2>
<button class=\"btn\">Hover Over Me</button>