How to create a custom print button that does not get printed

[orclord1]

I am a very new coder and am trying to figure out to use my own button design to print the page, but not to print the print button (or any other buttons).

Here is the css I am using for the button design:

    /* Page Menu Container */
    .pageMenuContainer {
        margin: 35px auto 0;
        text-align: center;
        width: auto;
        display: block;
    }

        /* ELEMENTS for Page Menu */
        .pageMenu {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            width: auto;
            font-family: Calibri, Arial, Helvetica, sans-serif;
            font-size: 16px;
            font-weight: bold;
            font-style: normal;
            color: #ffffff;
            border-radius: 8px;
        }

        .pageMenu li {
            display: inline-block;
            margin: 3px;
            background-color: #320005;
            min-width: 150px;
            box-sizing: border-box;
            box-shadow: inset 0 0 1em rgba( 222, 140, 140, .3 );
        }

        .pageMenu li a {
            display: block;
            color: white;
            text-align: center;
            padding: 10px 2px;
            text-decoration: none;
            box-sizing: border-box;
            box-shadow: inset 0 0 1em rgba( 222, 140, 140, .3 );
        }

        .pageMenu li a:hover:not(.active) {
            background-color: #003133;
            box-sizing: border-box;
            box-shadow: inset 0 0 1em rgba( 255, 255, 255, .4 );
        }

        @media screen and (max-width: 600px) {
            ul.pageMenu li {display: block;}
        }

Here is the css I have tried to use for hiding the print buttons but it is not working (or I am not referencing it correctly).

@media print  { .noprint  { display: none; } }

Here is my html I have so far:

<div class="pageMenuContainer">
    <ul class="pageMenu">
        <li class="pageMenu noprint">Print</li>
        <li class="pageMenu noprint"><a href="https://www.example.url" target="_blank">Return to Set</a></li>
    </ul>
</div>

For the class where the “Print” option appears, I realize I need to also add a class that will make the printing happen, but I don’t know how to do this. I see many examples on a search, and they all seem to be different. I don’t really have much experience with Javascript and so far my experiments in trying to use it with this code have not worked.

Could someone please help me out.

1. What css code should I use for printing?
2. How do I link the the css printing code to the html code? (I’m assuming it would just be added as another class with the other 2 classes I have declared)?
3. How do I make the buttons not print?

[orclord1]

I’ve been searching for more examples, and found one that I was able to incorporate into my code to activate the print function (and without Javascript).

<li class="pageMenu noprint"><a title="Print" alt="Print" onclick="window.print();"target="_blank" style="cursor:pointer;">Print</a></li>

That resolves questions #1 and #2 above.

I still haven’t found a way to make these buttons not print though. Any suggestions?

[orclord1]

I have now added “print” and “screen” to my link reference:

<link type="text/css" rel="stylesheet" href="css/mystyles.css" media="screen, print">

I tried just adding media=“print” to the the link, but then the page was coming out garbled… as if it couldn’t find a css sheet. Once I added “screen” it fixed it, but I honestly have no knowledge/understanding of when these are needed. I’ve tried to understand when @media references are needed and I just haven’t figured it out yet.

Regardless though, with this change, the buttons still print.

[PaulOB]

@orclord1

@media print { .noprint { display: none; } }

You need to match the specificity of the original rules.

Print styles are one of the cases where !important can be useful as long as it’s a one off and not over used.

@media print { .noprint { display: none!important; } }

[orclord1]

Thank you greatly. That did it.