How To Replace Submit Button With A Image

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Scroll down to where you see </head> tag .

3.Copy below code and paste it just before the </head> tag .

<style type='text/css'>
.formbutton{
cursor:pointer;
border:outset 1px #ccc;
background:#999;
color:#fff;
font-weight:bold;
padding: 1px 2px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZh8zzt2WYa8S120L4bq_D8ythf7ZjAE8tLITMWqYuNKx8oJ4lUr4VT19lSfhu0DTXVX8eLYpKkIkuQP0GiGsMXpwbf-Mji2GXTd1p5c8b5zoO7IPjY6mAFr6x7dyhuA11RkHWrMeYawI/s400/topnav_stretch.gif) repeat-x left top;
}
</style>

NOTE:You can use another image instead of above image and can change colors as your choice.

4.Now save your template.

5.Now add class="formbutton" into your input tag.Look at the example below.

<form>
<input type="text" style="width: 200px; border: 1px />
<input type="submit" class="formbutton" value="Subscribe" />
</form>

It will look like this:

Replace Submit Button With A Image