I am new to CSS and I was looking at this beautiful code:
https://jsfiddle.net/heckz72g/
The problem here is that I have defined font "color" as "blue", yet the filter comes upon the text and it is no more blue. It changes according to the filter applied. How do I make the text color blue only?
This is the out put of fiddle:
This is what I want:
Please tell me how to remove the css-filter on the text ("SOME TEXT") and make all the text color "blue"?
HTML:
<div class="button-wrapper">
<a class="background-button" href="#" title="SOME TEXT"></a>
</div>
<div class="button-wrapper">
<a class="background-button" href="#" title="SOME TEXT"></a>
</div>
<div class="button-wrapper">
<a class="background-button" href="#" title="SOME TEXT"></a>
</div>
<div class="button-wrapper">
<a class="background-button" href="#" title="SOME TEXT"></a>
</div>
<div class="button-wrapper">
<a class="background-button" href="#" title="SOME TEXT"></a>
</div>
<div class="button-wrapper">
<a class="background-button" href="#" title="SOME TEXT"></a>
</div>
<div class="button-wrapper">
<a class="background-button" href="#" title="SOME TEXT"></a>
</div>
<div class="button-wrapper">
<a class="background-button" href="#" title="SOME TEXT"></a>
</div>
CSS:
body {
text-align: center;
}
a {
position: relative;
width: 100%;
padding-top: 25.92%;
display: block;
background-size: 100% 100%;
font-family: 'luckiest guy';
font-size: 28px;
margin-bottom: 20px;
text-decoration: none;
color: blue;
}
a.background-button {
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/323909/yellow-shadow.png);
}
a.background-button:after {
content: attr(title);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
display: block;
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/323909/yellow-top.png);
transition: all 0.3s;
display: flex;
justify-content: center;
align-items: center;
}
a.background-button:hover:after {
-webkit-transform: translate(2.5%, 10%);
transform: translate(2.5%, 10%);
text-shadow: 2px 2px 1px white;
color: black;
}
.button-wrapper {
width: 355px;
display: inline-block;
margin: 20px;
}
.button-wrapper:nth-child(2) a {
-webkit-filter: hue-rotate(36deg);
filter: hue-rotate(36deg);
}
.button-wrapper:nth-child(3) a {
-webkit-filter: hue-rotate(72deg);
filter: hue-rotate(72deg);
}
.button-wrapper:nth-child(4) {
-webkit-filter: hue-rotate(108deg);
filter: hue-rotate(108deg);
}
.button-wrapper:nth-child(5) {
-webkit-filter: hue-rotate(144deg);
filter: hue-rotate(144deg);
}
.button-wrapper:nth-child(6) {
-webkit-filter: hue-rotate(180deg);
filter: hue-rotate(180deg);
}
.button-wrapper:nth-child(7) {
-webkit-filter: hue-rotate(216deg);
filter: hue-rotate(216deg);
}
.button-wrapper:nth-child(8) {
-webkit-filter: hue-rotate(216deg);
filter: hue-rotate(216deg);
}
.button-wrapper:nth-child(9) {
-webkit-filter: hue-rotate(252deg);
filter: hue-rotate(252deg);
}
.button-wrapper:nth-child(7) {
-webkit-filter: hue-rotate(288deg);
filter: hue-rotate(288deg);
}
.button-wrapper:nth-child(8) {
-webkit-filter: hue-rotate(324deg);
filter: hue-rotate(324deg);
}