While searching the web for fun buttons for advancing my story, i found this piece of code:
button {
border: 0;
background: #0087cc;
border-radius: 4px;
box-shadow: 0 5px 0 #006599;
color: #fff;
cursor: pointer;
font: inherit;
margin: 0;
outline: 0;
padding: 12px 20px;
transition: all .1s linear;
}
button:active {
box-shadow: 0 2px 0 #006599;
transform: translateY(3px);
}
and happily attached it to my CSS passage. Calling it with <button></button> in other passages works perfectly, but after about two hours of searching for a way to make the button actually do anything (advance story or whatever) I am beginning to wonder if that's possible. But since this is the first time I have anything to do with terms such us: html, CSS or javascript, it's safe to assume I'm missing something.
Comments
data-passage
attribute. For example:Aand, as ut usually happens one solution bring up three new problems. Well, one at the moment. I can't seem to change the font. <font face="."></font> seems to work on every other thing, but the button text. Changing font in the .passage button[data-passage] { (...) } didn't work.
I guess I could live well without that, but... now I'm really curious what could be causing that.
Yeah. Don't use the deprecated
<font>
element.Since you failed to mention what you tried, I'm going to guess that you did it wrong, because there's no reason it shouldn't have worked.
If you only want to change the font family and/or size, then you can use the
font-family
property to change the family and thefont-size
property to change the size (to change several font properties all at once, there's the shorthandfont
property). For example:That would be a safe assumption
Just to clarify (since with your suggestions I managed to make it work) I changed the code to with "gunnerstorm" beeing a custom imported font.
And that didn't work. Then I switched it to: and it works! I'm still not sure why ^^'
Thank you very much for the help!
font
property: Did not work because it's invalid.From the
font
property documentation I linked above:[quote]Note: There are a few caveats when using the CSS
font
shorthand. If these conditions are not met, the property is invalid and is entirely ignored.- Except when using a keyword, it is mandatory to define the value of both the
In other words, when using thefont-size
and thefont-family
properties.font
shorthand property you are required to do, at least, this: Since thefont-family
property only requires font families, that's why it worked when you changedfont
out for the following:Additionally, since I'm unsure if you know this. If you're using a custom font, you'll have to include it as part of your story or any viewers who don't have the font will not see it properly.
Well, I used "Import Font..." option, and ended up with a stylesheet passage named "gunnerstorm". And the font changed back to default without it. So I guess that's what you meant?