Adding css in a button link

Question

how to add a link style in a button. So, i have a link style:

a:link {color:#FFFFFF;}
a:visited {color:#FFFFFF;}
a:hover {color:#FFFFFF;}
a:active {color:#FFFFFF;}

how to integrate this style with this button css.

button {
text-decoration: none;
text-shadow: 0 1px 0 #000000;
font: bold 11px Helvetica, Arial, sans-serif;
color: #FFFFFF;
line-height: 17px;
height: 18px;
display: inline-block;
float: left;
margin: 5px;
padding: 5px 6px 4px 6px;
background: #F3F3F3;
border: solid 1px #D9D9D9;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
 -webkit-transition: border-color .20s;
 -moz-transition: border-color .20s;
 -o-transition: border-color .20s;
 transition: border-color .20s;
height: 29px !important;
cursor: pointer;
}

well, if i use a:link {color:#FFFFFF;} a:visited {color:#FFFFFF;} a:hover {color:#FFFFFF;} a:active {color:#FFFFFF;} in .css file then all links going to be white, but i want to change the color of links only in buttons.. — Max Muller
– Max Muller, Commented Dec 14, 2012 at 17:16

Joel Etherton · Accepted Answer · 2012-12-14 17:16:49Z

1

If you want to have the same style applied to multiple elements (and type of elements) then you should be using classes.

.link:link {color:#FFFFFF;}
.link:visited {color:#FFFFFF;}
.link:hover {color:#FFFFFF;}
.link:active {color:#FFFFFF;}

.button { all of your button styles }

Then use them together when you need them together:

<input type="button" class="link button" value="I'm a button" />

answered Dec 14, 2012 at 17:16

Joel Etherton

37.5k10 gold badges92 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

patman · Accepted Answer · 2012-12-14 17:29:47Z

1

Use button a:link, button a:hover, button a:visited, button a:active.

But what's the point of having a link inside a button?

answered Dec 14, 2012 at 17:29

patman

2,8325 gold badges35 silver badges58 bronze badges

Comments

mjimcua · Accepted Answer · 2012-12-14 17:19:02Z

I not understand very well the question but maybe this can serve you:

INPUT:hover {background: yellow;}
INPUT:focus {background: #FF99FF;}
INPUT:focus:hover {background: #99FF99;}

or

INPUT:focus:hover {
text-decoration: none;
text-shadow: 0 1px 0 #000000;
font: bold 11px Helvetica, Arial, sans-serif;
color: #FFFFFF;
line-height: 17px;
height: 18px;
display: inline-block;
float: left;
margin: 5px;
padding: 5px 6px 4px 6px;
background: #F3F3F3;
border: solid 1px #D9D9D9;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
 -webkit-transition: border-color .20s;
 -moz-transition: border-color .20s;
 -o-transition: border-color .20s;
 transition: border-color .20s;
height: 29px !important;
cursor: pointer;

}

Collectives™ on Stack Overflow

Adding css in a button link

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related