Change Colour Opacity When Dont know RGB values only Alpha - css

Question

I am attempting to change a buttons colour to 50% opacity when hovered over. This is simple enough when I know what the colour is but it will change at runtime.
Any ideas how I can do this with CSS3? I know I could do this easily with LESS but its not available to me.
.my-btn {
background-color: rgba(255,0,0,1); /* Will change at run time to anything */
}
.my-btn:hover {
background-color: rgba(?,?,?,0.5); /* I dont know what the rgb values will be */
}

Answer 1

Problem
Using the opacity property on the button itself would affect the text of the button; not ideal.
Solution
Apply the background color to a pseudo-element instead and layer it underneath the text with negative z-index. When needed, use the opacity property on the pseudo-element to create your transparent background.
Example
Note: Pseudo-elements cannot be applied to the <input> element as it cannot have children. This will only work with elements that can have children, such as <button> and <a>.
button {
position: relative;
background: none;
border: solid 1px #EEE;
padding: 10px;
border-radius: 5px;
overflow: hidden;
}
button:before {
content: '';
position: absolute;
top: -1px;
right: -1px;
bottom: -1px;
left: -1px;
background: red;
z-index: -1;
opacity: .5;
}
button:hover:before {
opacity: .8;
}
button:active:before {
background: orange;
}
<button>Button</button>

Answer 2

It's a bit tricky because using a combination of a rgb background color and opacity sounds like it will work but the opacity will apply to everything inside the element - including the text. there are a number of ways of getting around this though so use a solution that will work for your situation.
Essentially you've got to separate the background element from the rest of the button so that only the background color gets effected by the opacity change on hover.
.my-btn:hover a {
background-color: rgb(255,0,0);
opacity:.5;
}
<div class="my-btn">
<span aria-hidden="true">whatever</span>
<span class="sr-only">whatever</span>
</div>
Here's a demo

Answer 3

Use the opacity attribute:
.my-btn:hover {
opacity: 0;
}
.my-btn:hover {
opacity: 0;
}
<input class="my-btn" type="submit"></input>