Skip to navigation

Simple CSS transitions

Subtle animations of text links when they are hovered over.


<!DOCTYPE html>
	<meta charset="utf-8">
	<title>Simple CSS transitions: Text links</title>
		* {
			margin: 0;
		body {
			font: 20px/1.5 arial, helvetica, sans-serif;
			color: #000;
			margin: 20px;
		p {
			margin: 20px 0;

		a {
			-webkit-transition: .5s;
			transition: .5s;
		#elephant {
			color: #999;
		#elephant:hover {
			color: #f66;
		#plesiosaur {
			color: #06c;
			text-decoration: none;
			border-bottom: 3px solid #ddd;
		#plesiosaur:hover {
			border-color: #06c;
		#tourist {
			color: #f66;
		#tourist:hover {
			color: #c00;
			background: #fcc

		#htmldog a:hover {
			transform: rotate(360deg);
	<h1>Simple <a href="">CSS transitions</a></h1>
	<p>Using <a href="">the <code>transition</code> property</a> for basic animated effects when links are hovered over.</p>
		<li><a href="" id="elephant">Changing color</a></li>
		<li><a href="" id="plesiosaur">Changing border color</a></li>
		<li><a href="" id="tourist">Changing color and background color</a></li>

	<!-- Link back to HTML Dog: -->
	<p id="htmldog"><a href=""><img src="" alt="HTML Dog"></a></p>


View original