**Question #1**: How do I fade in the text and fade out the text instead of just showing it in the textbox

**Question #2 [SOLVED]**: I would like to put some space between the button icon and the text but it's not working.
Example of button:

![image overlapping texts](https://i.stack.imgur.com/CuhuH.png)

**UPDATE**:
`padding-left: 30px;` fixed the space issue.

html:

```
<input type="button" id="sv" value="          Score Viewer"></input>
<input type="button" id="pv" value="          Print Viewer"></input>
<input type="button" id="ev" value="          Exam Viewer"></input>
<br>
<input type=text id="tvinfo" value="" readonly size=50 />

```

JQuery:

```
$(function() {
    $('#sv').hover(
        function () {
            $('#tvinfo').val("View scores of exams already taken");
        }, 
        function () {
            $('#tvinfo').val("");
        }
    );
    $('#pv').hover(
        function () {
            $('#tvinfo').val("View who printed the certificate");
        }, 
        function () {
            $('#tvinfo').val("");
        }
    );
    $('#ev').hover(
        function () {
            $('#tvinfo').val("View who already took the exam");
        }, 
        function () {
            $('#tvinfo').val("");
        }
    );
});

```

CSS:

```
#sv {
    background: #ccc url(view.png) no-repeat top left;
    height: 53px;
    width: 186;
    cursor: pointer;
}
#pv {
    background: #ccc url(print.png) no-repeat top left;
    height: 53px;
    width: 186;
    cursor: pointer;
}
#ev {
    background: #ccc url(taken.png) no-repeat top left;
    height: 53px;
    width: 186;
    cursor: pointer;
}

```