I have a button, as shown here:
http://www.tomliv.com/img/button.png
and I am using this style:
.button{
display: inline-block;
background-color: $yellow;
background-image: url(../img/button-arrow.png);
background-position: 100% 0;
background-repeat: no-repeat;
color: $lightblue;
@include scalabold-font;
font-size: 17px;
font-size: 1.063rem;
padding: 11px 35px 8px 10px;
margin: 10px 0;
text-align: center;
text-transform: uppercase;
text-decoration: none;
}
This type of style comes up a lot where i work. This isn't very stable.
It's easily messed up by different font sizes - either different button
uses styled differently or user preferences.
Can anyone recommend a better way to style a button like that? Text is
'live text' and has a graphic element in it. I've been around and around
with different attempts. I feel like I'm not seeing the forest for the
trees...
TIA
--
Tom Livingston | Senior Front-End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
