I have CSS in a
<a>
color
<a href="example.com" style="
.button {
color: red;
}
.button:hover {
color: blue;
}">text</a>
In its current form your HTML is invalid as your style
attribute is attempting to use pseudo classes (:active
, :hover
) and class selectors (.button
). The style
attribute can only include declaration blocks (without braces).
The value of the style attribute must match the syntax of the contents of a CSS declaration block (excluding the delimiting braces)
CSS Style Attributes (http://www.w3.org/TR/css-style-attr/)
A CSS declaration block is defined as:
A declaration block starts with a left curly brace ({) and ends with the matching right curly brace (}). In between there must be a list of zero or more semicolon-separated (;) declarations.
Syntax and basic data types (http://www.w3.org/TR/CSS21/syndata.html#rule-sets)
Ideally the style rules would be moved into a separate stylesheet included in the head
of the page but you could get away with extracting the rules into style
tags.
<style>
.button {
text-decoration: none;
text-align: center;
padding: 6px 16px;
border: outset 5px #005072;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
font: 18px Verdana, Geneva, sans-serif;
font-weight: bold;
color: #000000;
background-color: #a62152;
background-image: -moz-linear-gradient(top, #a62152 0%, #4326b5 100%);
background-image: -webkit-linear-gradient(top, #a62152 0%, #4326b5 100%);
background-image: -o-linear-gradient(top, #a62152 0%, #4326b5 100%);
background-image: -ms-linear-gradient(top, #a62152 0%, #4326b5 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#4326b5', endColorstr='#4326b5', GradientType=0);
background-image: linear-gradient(top, #a62152 0%, #4326b5 100%);
-webkit-box-shadow: 0px 0px 2px #d11abc, inset 0px 0px -1px #ffffff;
-moz-box-shadow: 0px 0px 2px #d11abc, inset 0px 0px -1px #ffffff;
box-shadow: 0px 0px 2px #d11abc, inset 0px 0px -1px #ffffff;
text-shadow: 1px -1px 2px #ffffff;
filter: dropshadow(color=#ffffff, offx=1, offy=-1);
-webkit-transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
}
.button:hover {
padding: 6px 16px;
border: outset 5px #005072;
font: 18px Verdana, Geneva, sans-serif;
font-weight: bold;
color: #ffffff;
background-color: #573bc7;
background-image: -moz-linear-gradient(top, #573bc7 0%, #a5194c 100%);
background-image: -webkit-linear-gradient(top, #573bc7 0%, #a5194c 100%);
background-image: -o-linear-gradient(top, #573bc7 0%, #a5194c 100%);
background-image: -ms-linear-gradient(top, #573bc7 0%, #a5194c 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#a5194c', endColorstr='#a5194c', GradientType=0);
background-image: linear-gradient(top, #573bc7 0%, #a5194c 100%);
-webkit-box-shadow: 0px 0px 2px #d11abc, inset 0px 0px -1px #ffffff;
-moz-box-shadow: 0px 0px 2px #d11abc, inset 0px 0px -1px #ffffff;
box-shadow: 0px 0px 2px #d11abc, inset 0px 0px -1px #ffffff;
text-shadow: 1px -1px 3px #2fb5b1;
filter: dropshadow(color=#2fb5b1, offx=1, offy=-1);
}
.button:active {
padding: 6px 16px;
border: inset 5px #005072;
font: 18px Verdana, Geneva, sans-serif;
font-weight: bold;
color: #ffffff;
background-color: #4326b5;
background-image: -moz-linear-gradient(top, #4326b5 0%, #a62152 100%);
background-image: -webkit-linear-gradient(top, #4326b5 0%, #a62152 100%);
background-image: -o-linear-gradient(top, #4326b5 0%, #a62152 100%);
background-image: -ms-linear-gradient(top, #4326b5 0%, #a62152 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#a62152', endColorstr='#a62152', GradientType=0);
background-image: linear-gradient(top, #4326b5 0%, #a62152 100%);
-webkit-box-shadow: 0px 0px 2px #d11abc, inset 0px 0px -1px #ffffff;
-moz-box-shadow: 0px 0px 2px #d11abc, inset 0px 0px -1px #ffffff;
box-shadow: 0px 0px 2px #d11abc, inset 0px 0px -1px #ffffff;
text-shadow: 1px -1px 9px #36cfb0;
filter: dropshadow(color=#36cfb0, offx=1, offy=-1);
}
</style>
<a target="_blank" href="http://www.youtube.com/user/danielspringermusic?sub_confirmation=1" class="button">Subscribe</a>
To summarise, you need to:
style
block to your page (preferably in the head
)style
attribute in the a
to this style
blockclass="button"
to the a
Applying styles to elements is one of the fundamentals of building a web page so I would suggest that you follow some tutorials to teach yourself the basics. Learning the Web looks like a good place to start.
Conversely, it appears that you are using Blogger. You can add custom CSS by following these steps:
- Sign in on blogger.com.
- Click on your blog.
- On the left side of the page, click Templates > Customize > Advanced.
- From here, you can change colors and fonts.
- To make changes using custom CSS, click Add CSS.
Use CSS to change your blog's format (https://support.google.com/blogger/answer/41954?hl=en)