CSS Buttons

I was looking for a GIF image of a + and a X with a box around it.  After some searching, I found an easier way to customize one…use CSS.

Here’s the class code:


.red_button {
background-color: red;
border: none;
color: white;
padding: 2px 2px;
text-align: center;
text-decoration: none;
display: inline-block;
margin: 2px 2px;
cursor: pointer;
font-size: 10px;
width: 20px;
height: 20px;
}

.green_button {
background-color: green;
border: none;
border-radius: 10px;
color: white;
padding: 2px 2px;
text-align: center;
text-decoration: none;
display: inline-block;
margin: 2px 2px;
cursor: pointer;
font-size: 10px;
width: 20px;
height: 20px;
}

The red button is a square and the green one is a circle.