Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Case of the useless button [Sugarcube]

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

  • 1. I'd suggest the following CSS instead, so you don't break SugarCube's own buttons and/or pick up properties from them:

    .passage button[data-passage] {
    cursor: pointer;
    font: inherit;
    color: #fff;
    background: #08c;
    border: 0;
    border-radius: 4px;
    box-shadow: 0 5px 0 #069;
    margin: 0;
    outline: 0;
    padding: 12px 20px;
    transition: all 0.1s linear;
    }
    .passage button[data-passage]:active {
    box-shadow: 0 2px 0 #069;
    transform: translateY(3px);
    }
    2. You can make the buttons link to passages by including the data-passage attribute.  For example:

    <button data-passage="New World">Go to the New World!</button>
  • Great, thanks for the help! :D

    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.
  • Lazy wrote:

    I can't seem to change the font. <font face="."></font> seems to work on every other thing, but the button text.


    Yeah.  Don't use the deprecated &lt;font&gt; element.


    Lazy wrote:

    Changing font in the .passage button[data-passage] { (...) } didn't work.


    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 the font-size property to change the size (to change several font properties all at once, there's the shorthand font property).  For example:

    font-family: Arial, Helvetica, sans-serif;

    font-size: 18px;

    font: 18px Arial, Helvetica, sans-serif;
  • TheMadExile wrote:

    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.


    That would be a safe assumption ;)

    Just to clarify (since with your suggestions I managed to make it work) I changed the code to
    button {
    border: 0;
    background: #0087cc;
    border-radius: 4px;
    box-shadow: 0 5px 0 #006599;
    color: #fff;
    cursor: pointer;
    font: gunnerstorm;
    margin: 0;
    outline: 0;
    padding: 12px 20px;
    transition: all .1s linear;
    }
    button:active {
    box-shadow: 0 2px 0 #006599;
    transform: translateY(3px);
    }
    with "gunnerstorm" beeing a custom imported font.

    And that didn't work. Then I switched it to:

    .passage button[data-passage] {
    cursor: pointer;
    font-family: "gunnerstorm";
    color: #fff;
    background: #003D99;
    border: 0;
    border-radius: 4px;
    box-shadow: 0 5px 0 #00255C;
    margin: 0;
    outline: 0;
    padding: 12px 20px;
    transition: all 0.1s linear;
    }
    .passage button[data-passage]:active {
    box-shadow: 0 2px 0 #00378A;
    transform: translateY(3px);
    }
    and it works! I'm still not sure why ^^'

    Thank you very much for the help! :D
  • The following font property:

    font: gunnerstorm;
    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 font-size and the font-family properties.
    In other words, when using the font shorthand property you are required to do, at least, this:

    font: {a valid font-size} {a valid font-family};

    /* For instance: */

    font: 18px gunnerstorm;
    Since the font-family property only requires font families, that's why it worked when you changed font out for the following:

    font-family: "gunnerstorm";

    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.
  • TheMadExile wrote:


    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?
  • That's one way to do it, yes.
Sign In or Register to comment.