css a hover code example

Example 1: how to change hyperlink color in css

a {
  background-color: red;
  color: white;
  padding: 1em 1.5em;
  text-decoration: none;
  text-transform: uppercase;
}

Example 2: css hover

.a:hover{background-color: black;}

Example 3: on hover css

/* Changes an element's color on hover */

.selector {
	background-color: black;
}

.selector:hover {
	background-color: blue;
}

Example 4: css a href hover effect

/* css code */
body{
   background-color: #000;
}
.container{            
   top: 50%;
   left: 50%;
   transform: translateX(-50%) translateY(-50%);
   position: absolute;
}
li{
   list-style: none;
   display: inline-block;
}
a{
   text-decoration: none;
   color:#fff;
   font-size: 24px;
   padding: 0 20px;
   display: inline-block;
}
.link::after{
   content: '';
   display: block;
   width: 0;
   height: 2px;
   transition: width .3s;
   background-color: #fff;
}
.link:hover::after{
   width: 100%;
   transition: width .3s;
}

/* html code */
<div class="container">
    <li><a href="#" class="link">Home</a></li>
    <li><a href="#" class="link">About Us</a></li>
    <li><a href="#" class="link">Services</a></li>
    <li><a href="#" class="link">Gallery</a></li>
    <li><a href="#" class="link">Contact</a></li>
</div>

Example 5: hover style html

/* css file */
.callitwhatever:hover
{
    background: none;
}

/* HTMl File */
<li><a href="#" class="callitwhatever"> Logo</a></li>

Example 6: hover css

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <title>CSS :hover property</title>

      <style>
         a {
            background-color: powderblue;
            transition: background-color 0.5s;
         }

         a:hover {
            background-color: gold;
         }
      </style>
   </head>
   <body>

	<a href="#">Try hovering over this link.</a>

	<!-- The :hover CSS pseudo-class matches when the user interacts
	with an element with a pointing device, but does not necessarily activate
	it. It is generally triggered when the user hovers over an element with
	the cursor (mouse pointer). -->

   </body>
</html>

Tags:

Javascript Example

Recent Posts