JSFiddle - React, Tailwind, and code Playground

by bvotcode

HTML

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>Title</title> 
<meta name="viewport" content="width=device-width, initial-scale=1" /> 
</head> 
<body> 
<h4>Example link /button using single image and CSS</h4> 
<p>The states of button use this image:  
 <img src='css/button_img1.gif' alt='vertical image button' width='125' height='120' /><br><br> 
 - Position the mouse over the button, then keep the button clicked to see the 'active' condition</p> 
 
<a href='https://coursesweb.net/' title='Web Programming Courses' id='addnew'>CoursesWeb.net</a> 
</body> 
</html>

CSS

#addnew { 
 width: 125px; 
 height: 40px; 
 display: block; 
 background: url('css/button_img1.gif'); 
 background-position: 0 0; 
 background-repeat: no-repeat; 
 border: none; 
 text-indent: -9999px; /* To not show the text-link */ 
} 
 
/* When the mouse-cursor is over the button */ 
#addnew:hover { 
 background-position: 0 50%; 
} 
 
/* When the the button /link is clicked */ 
#addnew:active { 
 background-position: 0 100%; 
}