Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>You can do this if you use an <code>&lt;a&gt;</code> tag instead of a button. I know it's not exactly what you asked for, but it might give you some other options if you cannot find a solution to this: </p> <p>Borrowing from a demo from another answer here I produced this: </p> <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>a { display: block; font-size: 18px; border: 2px solid gray; border-radius: 100px; width: 100px; height: 100px; text-align: center; line-height: 100px; } a:active { font-size: 18px; border: 2px solid green; border-radius: 100px; width: 100px; height: 100px; } a:target { font-size: 18px; border: 2px solid red; border-radius: 100px; width: 100px; height: 100px; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;a id="btn" href="#btn"&gt;Demo&lt;/a&gt;</code></pre> </div> </div> </p> <p>Notice the use of <code>:target</code>; this will be the style applied when the element is targeted via the hash. Which also means your HTML will need to be this: <code>&lt;a id="btn" href="#btn"&gt;Demo&lt;/a&gt;</code> a link targeting itself. and the demo <a href="http://jsfiddle.net/rlemon/Awdq5/4/" rel="noreferrer">http://jsfiddle.net/rlemon/Awdq5/4/</a></p> <p>Thanks to @BenjaminGruenbaum here is a <em>better</em> demo: <a href="http://jsfiddle.net/agzVt/" rel="noreferrer">http://jsfiddle.net/agzVt/</a> </p> <p><sub>Also, as a footnote: this should really be done with JavaScript and applying / removing CSS classes from the element. It would be much less convoluted.</sub> </p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload