<Button>不能与弹出窗口一起使用。</button> <Button>（HTML，CSS，JS）</button>

Question

I can't quite figure this out. I've created a smiley with css color values. But when I added the button it made the face ugly. (It added a circle around the center of the smiley design) I've tried forwarding the button tag with the same element of the popup which is popScroll . But still my luck has yet to shine through.

When I click the submit button in the bottom right, the popup will open and refresh, which is fine. It shows it works, but I really want to get this smiley face I've made to work with this popup so I can move further with design.

Can someone please show me what i'm doing wrong? I'm really new to this, and would love some insight on how to be a better coder and developer. When you click the button now(the smiley face) it will do a alert which says hi, I was just testing to see a transparent button over the face would work.

I'll be active to respond to any questions and responses immediately.

My code can be found here .

<div class="popScroll">
    <div class="popup"> 
    <!-- Smiley button -->
    <button onclick="alert('hi');" class="smiley">
        <!--<div class = "smiley"></i></div>-->
    </button>

Answer 1

Seems a border has been added higher up in the css.

Remove this and you should be sorted.

.smiley {
    border: none;
}

CodePen

Answer 2

这是你想要的？

.smiley:focus{ outline: none}