How to determine a general approach to achieve an effect from Photoshop via css?

Our designer prefers to provide web designs in .psd (Photoshop). When we get to create a page markup and styles, we usually have to compromise the design in favour of tools available to us. Surely the later depend on the skill of the person who implements the page, but given the following example, what is the general approach to research and arrive at the correct CSS technique to implement the design?

The example in question is the following: In Photoshop, a text-based login button looks like this as the final result:

This is basically a [T] (text) element with the effect (Fx) applied to it. The effect is color overlay that appears to be set like this:

Without this effect, the login page in PSD looks like this:

Which is exactly how it looks in our page on the browser. If we are to get it to look exactly the same as in final .psd design, how we are to approach looking for the correct css-technique example?

We implemented the login link as <button> element with a given .css class. I've tried going with backgound-blend-mode: normal like this:

.login-box .login-button {
    width: 100%;
    height: 100%;
    margin-left: 12.4vmax;
    margin-top: 0.7vmax;
    background: #5f6f8f;
    border: 0;
    outline: 0;
    font-family: "OpenSansRegular";
    color: rgb(57, 68, 98);
    font-size: 0.9vmax;
    font-weight: 700;
    background-color: #5f6f8f;
    background-blend-mode: normal;
}

but it gives the following look in Chrome:

I realize that the problem is probably related to the fact that we are using web font technique and it's not affected by the styling in browser, the same way text is affected in photoshop, but I'd appreciate a hint on how to approach the above-described problem. Thank you.

Try using adobe brackets it really comes in handy while slicing a psd. It has lots of cool feature and it would provide you with CSS hints so that you can achieve the same result as the .psd

Download brackets from here