Cool css button design styles with icon and hover effect

Cool css button design styles with hover effect

DEMO

HTML

<h1>Cool css button design styles with hover effect</h1>
<input type="submit" value="Save" class="button green" />
<input type="submit" value="Error" class="button red" />
<input type="submit" value="Info" class="button blue" />
<input type="submit" value="Warning " class="button yellow" />
<h2>Button with icon</h2>
<input type="submit" value="Save" class="button green-icon" />
<input type="submit" value="Error" class="button red-icon" />
<input type="submit" value="Info" class="button blue-icon" />
<input type="submit" value="Note " class="button yellow-icon" />

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400, 300);

/* Button styles */
 .button {
    width: 160px;
    height: 60px;
    margin: 1% auto;
    overflow: hidden;
    border-radius: 5px;
    border: 2px solid;
    transition: background 0.3s ease;
    color: white;
    font-size: 1.8em;
    line-height: 50px;
    text-align: center;
    cursor:pointer;
}
/* Colors styles */
 .green {
    background-color: #4cbe83;
    border-color: #36ad6f;
}
.green:hover {
    background-color: #36ad6f;
}
.red {
    background-color: #e47c68;
    border-color: #d46c57;
}
.red:hover {
    background-color: #d46c57;
}
.yellow {
    background-color: #feb742;
    border-color: #eda93b;
}
.yellow:hover {
    background-color: #eda93b;
}
.blue {
    background-color: #77d3e0;
    border-color: #6cc8d4;
}
.blue:hover {
    background-color: #6cc8d4;
}

.green-icon {
background:#4cbe83 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABGdBTUEAALGPC/xhBQAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAKLSURBVEhLY2TAB/6xMvpf7WXjZL8RxsTAmPqPgdWS+f8f5j9Mf88wMrJv/879qMNAQv9nI2P9P7zmoEvW19czRV/NsYi6lfcy+nbOf3w4/Gb+7/DbmWkx3+LZiLIk8WkKH9DAvYQMRpcHOSbkSZ46Xktiz+fLEONqXJZH3sz6F3Uv3w2rJTHXqvkjb+a+JtXl2NRH3MkyQbEEHOZ3c/dTw3CwGTdzPnk8yOOBWxJ+P9OKXMNj7hTgSAT5jWAL/v//zwj00gtyLMh7UPv/5e83//MeNGC1JOtYDhdD6s10DnIMT7lX+v/dnw9A9/0HWvL6f8qdEgxLYm5lRTNE385MJNWC2LuF/1/8egU2HAQe/nzyP+EepgVRt7IfMQCJQ7gsqHvU/f/o5zMYLrv5/S7ccJAvQL7BZQZD+O2cr9gkc+7V/f8OhCCw7t1OuAFHP5+GG/7z78//Gfcq8OZ0hsi7eb+xWdD6dMr/v0AIA5NfLvy/5NVaOB8kV/ywCa/hIHMZgJnrMi7vzXu1CsUSmOkgwyc+n0vQcLAFYbeyW/BF8pZ3e+GuhjHWvt1KlOHABPSFIfhujgihVHT84ym4JYc/nyLS8Jz/wARUz2Byypw5+mbmL0KWXP9+5/+1b7eJNhxkHqh8A+dmYHmeTsgCYFn1H3exgFlnAEuHs6BSAmxB7u48NmqVpDCHxt/NlUUpUaMupCuH387/S9AnBGo4kP6oW4XpWOsEYFw4gSoNSiyJuFPQCir+cdZsfk/StCPu5H4kx5Lw20XRDMCGAsG6OeZEHC/QArz5A9kBMbdy9wa+TpMgaDC6At+vAdzR1/MTgOn5CbBI+R95NxuOgWXYz4gb+U2pN5sEgPpwuhoA08wMnY2prQ4AAAAASUVORK5CYII=) no-repeat 10px 50%;    
border-color: #36ad6f;
}
.green-icon:hover {
    background-color: #36ad6f;
}
.red-icon {
    background:#e47c68 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAHxSURBVEhLtZXJSgNBEIY743JQDy5R8BYQFLx7ESSIiIEQmiGIS5AmJOJF9CAIAUV8C9/Ao4i4QPAsErds6NkHUIMXEclvVcKYZEx6Ro0Fzcww3f/XXUuXR2isuCUMz6O/XbR5l0WxuEhjTBiGQUtS9NwXH117wud79+zuFnU63/5hdrYF0dA4ouYTDTiMF5o7wWtcQRCR3SR45ULYDr7DXLBHC0FMDkFJN7tudKpnLIVG6kIQX/CS+Osvdl4LY405OVgDKfvcvPuzuBUvJTPY9rd+QbBszjRNvAIxSwDs7BgkTpngmC1O2WR3VQF+OgXiwQ6t+FoEuLoAzg6BWLg8Tg6Am0tgdUkPXZF9gsTXtQAWtyxzC2Suq77pXX/yTQaktJOSRxVB+9v5qRPgmgFvWgC7hHdut4ds2V36E7y4A6Sr3GKBcmlnANUEA/TXAge0kbH7dCdQ8oYBG9pJnC2W3ecBds1X0B2CHJMJgfmpTi2AU5EzhwNqpWnyGMhRXJzSNB70/n+hlao5Gpr8h0oOVO4ivuyUzDYNomS+dE1UG1S4tyl3kpIF6isD9XuCksN/grC4Co/qu5qc6Sd3pX/sLiVz1Gjq79xOZP8RZJpGwRHEHUzJQE2DcdX9Obs4+NTICZKoqXiqUPreKv2zB9Mm/gkNahV+VNPzFAAAAABJRU5ErkJggg==) no-repeat 10px 50%;    
    border-color: #d46c57;
}
.red-icon:hover {
    background-color: #d46c57;
}
.blue-icon {
    background:#77d3e0 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAADlElEQVR42rVVXUwUVxQ+d2aXZf9gd4Z1sdC1bDbA0ixSgZCaPmiLkmqbPhibJrY+GGtRq2lSEx/61KeaFlNtocE2TYya9MEXaxqJJCY1KRZbgrQCLj/uCuVnWdmZYX9nmZ25vTMGYmXZpYo3k5lzzj3n+86Ze+YMgue8UK5NpvPeZptR18KadPUmPe3WU8iu2iUF8ylJCXJJqU8QM93zH3kH1kxg/eoWVcyw+16yF56oLzX5quwG0FOAdAiBImVIBMKUjkYZjLGkABrh07h/Ljn4gBfbYtHYJeGTBmVVgpJz9zwVTOHFV8utTQ4jDWkZgFNvZOlCEXjbZYCMguGXaQmwk9HsrIEGcsHDlAy/T8X/nBTE90MfVo+tINjwvb+xoczSVcEYWaLipT2sZipK6ANWgroKm6b3+Dl0NW3GtJ5e9kFkqXKQE7k7s/Fdswerbi8TMJ3Drsbyoj4Pa3Q8GaDKSkZBb1AxaKl1aPqV/jDqLbBhiqJQNv8AL0b6p+MN4UPVE5qx9qfA1dc2Fb2V68BFPgGV1CLIpLb7YIBCmyln99yajHYNvOfejazfDdfsrmLuMkYdejyLbPLj+mo+SzKXkvD1Ub4Wlf048uk7XrZN3csVwE7OQGWpljUenkshobw0pz95wLVR7iTyXhrv2O62Hc73wWxXFmCnr0STfx6Yh159cb4Q+G0i2okqL46f3eGxH89X8jZZWD5kQoAIAc73Sm8GhXZEev/Quz5H5/Oo4Mpw5Cgyn7mzsbnaGSwrKihYzwqmo+nFXwOCWzO6z4+dbam0H6PWiYB0MroxLnSM7vd8rBktp/8w17g29DSWWzevB0H/THzQPxfbKhz1xZf7u7j9rrPKae2qL7PUZRuxazkDdb4Q8L/H5pNvcq01s6rtP1iW07dNpSXMqaYXi46QMU3/nwoiyYxMwM+FhdjJheOvJJYwV47rL27SzXUeYesLZktIlCElPyKITkVA98gby0S3bLTjRRmjqWg6+o+QvjwTW/yab/UOPYm3gsD8ZY9rX5PngY81QCAhw0AoMRngxA5LAe0y6inthyNKirCQloMLYqYP86He2Gevp1dr1ZUVdAw1H9ji7FbT/iuUGB8KJZrnW70TeZt+rQTOH/xH9rxc0k7A/SPh5A4CPv204FkJPBfGzjhM+m3+h8md/OGa8LOAZyUo/Hbwcz0o38SO1UaeFTwrAZy4TEHbXuUpsLKufwE8NjoPWjCVYQAAAABJRU5ErkJggg==) no-repeat 10px 50%; 
    border-color: #6cc8d4;
}
.blue-icon:hover {
    background-color: #6cc8d4;
}
.yellow-icon {
    background:#feb742 url(data:image/png;base64,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) no-repeat 10px 50%; 
    border-color: #eda93b;
}
.yellow-icon:hover {
    background-color: #eda93b;
}