RESOLVED: Uploadcare Button Styling – Responsive Width

I’ve recently posted about having issues with styling my Uploadcare button to make it responsive. I ended up coming up with a solution that I’ve edited my OP with to share for anyone interested.

<style>
.uploadcare--widget {
  width: 50%;
}
  
.uploadcare--widget__button {
  width: 100%;
  height: 50px;
  padding: 1em;
  font-family: Poppins;
  letter-spacing: 1px;
  background: #26c79a;
  padding: 10px;
  text-align: center;
  text-transform: uppercase;
  font-weight: 500;
  border-radius: 3px;
  transition: all .3s ease-in-out;
}

.uploadcare--widget__button:hover {
  background: #30e9b5;
  font-family: Poppins;
  text-align: center;
  font-weight: 500;
  color: white;
}
</style>

Now the button I’ve added in the modal form not only appears stylistically the same as the form submit button but it also scales down as a browser/device screen gets smaller.

Happy Friday everyone!


https://preview.webflow.com/preview/northwaymetals?preview=52d6b29709c9f1f716ef4529e1e8ec33

Published live site

Note: the button in question is in a form in the Quote Popup symbol located on the home page.

1 Like

Resolved…

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.