HTML and CSS Reference
In-Depth Information
This comparison should help you to find a balanced
method of converting these buttons, using a mix of
CSS properties and cropped images.
Once you identified that (as above), go to deactivate
those effects from the Photoshop Layers Panel and
leave only what needs to be cropped.
So, the steps applied to these buttons would be:
Remove the
“Learn from it
” and “
Read more
” text to
have the two button states ready (
default and hover
).
1. Remove
the text
Move these buttons into a new PSD document or
remove some of the noise around it (e.g.
pictures, text
etc.
) so you can stay focused on the buttons.
