If you're going to build a coupon website, you'll need to know how to show coupon codes to your users. One easy way is to use a prompt up window that will show the code when the user clicks on a button. In this article, I'll show you how to set up that button and make it work with your website.

In this article, I will show you how to create a coupon code button that will pop up a window with the code displayed. This can be handy for coupon sites, or for anyone who wants to give a discount code to their audiences. It's a simple process that only takes a few minutes to set up.

And Here is the code:

HTML BUTTON

<button class="button btn-click" onclick="s=prompt('Copy This Coupon Code','50-DjzrWBPh-SAVE'); window.open('https://www.example.com');">GET COUPON</button>

CSS BUTTON STYLE 1

<style type="text/css">

.btn-click {
    box-shadow: 0px 1px 0px 0px #fff6af;
    background:linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);
    background-color:#ffec64;
    border-radius:6px;
    border:1px solid #ffaa22;
    display:inline-block;
    cursor:pointer;
    color:#333333;
    font-family:Arial;
    font-size:15px;
    font-weight:bold;
    padding:6px 24px;
    text-decoration:none;
    text-shadow:0px 1px 0px #ffee66;
}
.btn-click:hover {
    background:linear-gradient(to bottom, #ffab23 5%, #ffec64 100%);
    background-color:#ffab23;
}
.btn-click:active {
    position:relative;
    top:1px;
}
</style>

CSS BUTTON STYLE 2

<style type="text/css">

.btn-click {
    box-shadow:inset 0px 1px 0px 0px #caefab;
    background:linear-gradient(to bottom, #77d42a 5%, #5cb811 100%);
    background-color:#77d42a;
    border-radius:6px;
    border:1px solid #268a16;
    display:inline-block;
    cursor:pointer;
    color:#306108;
    font-family:Arial;
    font-size:15px;
    font-weight:bold;
    padding:10px 24px;
    text-decoration:none;
    text-shadow:0px 1px 0px #aade7c;
}
.btn-click:hover {
    background:linear-gradient(to bottom, #5cb811 5%, #77d42a 100%);
    background-color:#5cb811;
}
.btn-click:active {
    position:relative;
    top:1px;
}
</style>

CSS BUTTON STYLE 3

<style type="text/css">
.btn-click {
    box-shadow:inset 0px 1px 0px 0px #d9fbbe;
    background:linear-gradient(to bottom, #b8e356 5%, #a5cc52 100%);
    background-color:#b8e356;
    border-radius:37px;
    border:1px solid #83c41a;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:Arial;
    font-size:26px;
    font-weight:bold;
    padding:14px 24px;
    text-decoration:none;
    text-shadow:0px 1px 0px #86ae47;
}
.btn-click:hover {
    background:linear-gradient(to bottom, #a5cc52 5%, #b8e356 100%);
    background-color:#a5cc52;
}
.btn-click:active {
    position:relative;
    top:1px;
}
</style>

If you want to add a CSS or HTML code to your website, you can easily do so by copying and pasting the code into your website. In order to paste the code, you'll need to open the HTML editor on your website. Once the editor is open, you can paste the code into the appropriate spot. Once the code is in place, you can save your changes and view your updated website.

Thanks for visiting!