Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
310 views
in Technique[技术] by (71.8m points)

html - Round button wispform embed button

I have created this form using Wispform, I have fixed it on the bottom right of my webpage but I am not able to get it rounded. Where do I add my border radius? Something like this

.feedback {
  background-color: #31B0D5;
  color: white;
  padding: 10px;
  /* border-radius: 400px; */
  border-color: #46b8da;
  /* border-bottom-left-radius: 33px; */
}

#mybutton {
  position: fixed;
  bottom: 5vh;
  right: 10px;
  /* border-radius: 40vw; */
}

.sendimg {
  max-width: 20px;
  /* height: 1vw; */
}
<script defer src="https://dashboard.wispform.com/plugin/buttonPopup/index.js?v=1"></script>
<div id="mybutton">
  <button class="feedback wispformPlugin-buttonPopup" data-name="samyakvermani" data-id="445e1461">
            <img src="imagessend-email.png" class="sendimg" alt="send">
        </button>
</div>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

Create a selector and add this selector to css with the following rules:

.feedback.wispformPlugin-buttonPopup {
   border-radius: 50%;
   width: auto;
}

.feedback {
  background-color : #31B0D5;
  color: white;
  padding: 10px;
  /* border-radius: 400px; */
  border-color: #46b8da;
  /* border-bottom-left-radius: 33px; */
}

#mybutton {
  position: fixed;
  bottom: 5vh;
  right: 10px;
  /* border-radius: 40vw; */
}
.sendimg{
  max-width: 20px;
  /* height: 1vw; */
}

.feedback.wispformPlugin-buttonPopup {
   border-radius: 50%;
   width: auto;
}
<script defer src="https://dashboard.wispform.com/plugin/buttonPopup/index.js?v=1"></script>
    
<div id="mybutton">
  <button class="feedback wispformPlugin-buttonPopup" data-name="samyakvermani" data-id="445e1461">
              <img src="imagessend-email.png" class="sendimg" alt="send">
  </button>
</div>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...