ThriveCart Custom HTML You Can Copy/Paste
Call To Action Glow
Buy Now
<style>
.button {
box-shadow: 0 10px 20px -10px #1880b3;
}
</style>
.button {
box-shadow: 0 10px 20px -10px #1880b3;
}
</style>
Buy Now
<style>
.button {
box-shadow: 0 10px 20px -10px #F51720;
}
</style>
.button {
box-shadow: 0 10px 20px -10px #F51720;
}
</style>
Buy Now
<style>
.button {
box-shadow: 0 10px 20px -10px #18A558;
}
</style>
.button {
box-shadow: 0 10px 20px -10px #18A558;
}
</style>
Call To Action Glow (On Mouse-Over)
Buy Now
<style>
.button:hover {
box-shadow: 0 10px 20px -10px #2E8BC0;
transition: all 0.2s ease-in-out;
}
</style>
.button:hover {
box-shadow: 0 10px 20px -10px #2E8BC0;
transition: all 0.2s ease-in-out;
}
</style>
Buy Now
<style>
.button:hover {
box-shadow: 0 10px 20px -10px #2E8BC0;
transition: all 0.2s ease-in-out;
}
</style>
.button:hover {
box-shadow: 0 10px 20px -10px #2E8BC0;
transition: all 0.2s ease-in-out;
}
</style>
Buy Now
<style>
.button:hover {
box-shadow: 0 10px 20px -10px #01949A;
transition: all 0.2s ease-in-out;
}
</style>
.button:hover {
box-shadow: 0 10px 20px -10px #01949A;
transition: all 0.2s ease-in-out;
}
</style>
Page Shadow
Example:
Code to Copy/Paste
<style>
.thrivecart-main {
box-shadow: 0 5px 20px rgb(7 30 87 / 49%);
}
</style>
.thrivecart-main {
box-shadow: 0 5px 20px rgb(7 30 87 / 49%);
}
</style>
Example:
Code to Copy/Paste
<style>
.thrivecart-main {
box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
}
</style>
.thrivecart-main {
box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
}
</style>
Example:
Code to Copy/Paste
<style>
.thrivecart-main {
box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
}
</style>
.thrivecart-main {
box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
}
</style>
Page Curved Corner
Example:

Code to Copy/Paste
<style>
.thrivecart-main {
border-top-right-radius: 50px;
}
</style>
.thrivecart-main {
border-top-right-radius: 50px;
}
</style>
Tips
Change the #50px to be bigger or smaller depending on how big you want the curve to be.
Change border-top-right-radius to just border-radius if you want all four corners curved.
Video Drop Shadow
Example:

Code to Copy/Paste
<style>
.video{
box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
}
</style>
.video{
box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
}
</style>
Tips
Change the #1880b3 to the color you use on your button. This is the color of the glow.
More Button Glows…
Find the color you like and then put a <style> and the start of the CSS and </style> at the end.
.button { box-shadow: 0 10px 20px -10px #ffcdd2; }
.button { box-shadow: 0 10px 20px -10px #ef9a9a; }
.button { box-shadow: 0 10px 20px -10px #e57373; }
.button { box-shadow: 0 10px 20px -10px #ef5350; }
.button { box-shadow: 0 10px 20px -10px #f44336; }
.button { box-shadow: 0 10px 20px -10px #e53935; }
.button { box-shadow: 0 10px 20px -10px #d32f2f; }
.button { box-shadow: 0 10px 20px -10px #c62828; }
.button { box-shadow: 0 10px 20px -10px #b71c1c; }
.button { box-shadow: 0 10px 20px -10px #fce4ec; }
.button { box-shadow: 0 10px 20px -10px #f8bbd0; }
.button { box-shadow: 0 10px 20px -10px #f48fb1; }
.button { box-shadow: 0 10px 20px -10px #f06292; }
.button { box-shadow: 0 10px 20px -10px #ec407a; }
.button { box-shadow: 0 10px 20px -10px #e91e63; }
.button { box-shadow: 0 10px 20px -10px #d81b60; }
.button { box-shadow: 0 10px 20px -10px #c2185b; }
.button { box-shadow: 0 10px 20px -10px #ad1457; }
.button { box-shadow: 0 10px 20px -10px #880e4f; }
.button { box-shadow: 0 10px 20px -10px #f3e5f5; }
.button { box-shadow: 0 10px 20px -10px #e1bee7; }
.button { box-shadow: 0 10px 20px -10px #ce93d8; }
.button { box-shadow: 0 10px 20px -10px #ba68c8; }
.button { box-shadow: 0 10px 20px -10px #ab47bc; }
.button { box-shadow: 0 10px 20px -10px #9c27b0; }
.button { box-shadow: 0 10px 20px -10px #8e24aa; }
.button { box-shadow: 0 10px 20px -10px #7b1fa2; }
.button { box-shadow: 0 10px 20px -10px #6a1b9a; }
.button { box-shadow: 0 10px 20px -10px #4a148c; }
.button { box-shadow: 0 10px 20px -10px #ede7f6; }
.button { box-shadow: 0 10px 20px -10px #d1c4e9; }
.button { box-shadow: 0 10px 20px -10px #b39ddb; }
.button { box-shadow: 0 10px 20px -10px #9575cd; }
.button { box-shadow: 0 10px 20px -10px #7e57c2; }
.button { box-shadow: 0 10px 20px -10px #673ab7; }
.button { box-shadow: 0 10px 20px -10px #5e35b1; }
.button { box-shadow: 0 10px 20px -10px #512da8; }
.button { box-shadow: 0 10px 20px -10px #4527a0; }
.button { box-shadow: 0 10px 20px -10px #311b92; }
.button { box-shadow: 0 10px 20px -10px #e8eaf6; }
.button { box-shadow: 0 10px 20px -10px #c5cae9; }
.button { box-shadow: 0 10px 20px -10px #9fa8da; }
.button { box-shadow: 0 10px 20px -10px #7986cb; }
.button { box-shadow: 0 10px 20px -10px #5c6bc0; }
.button { box-shadow: 0 10px 20px -10px #3f51b5; }
.button { box-shadow: 0 10px 20px -10px #3949ab; }
.button { box-shadow: 0 10px 20px -10px #303f9f; }
.button { box-shadow: 0 10px 20px -10px #283593; }
.button { box-shadow: 0 10px 20px -10px #1a237e; }
.button { box-shadow: 0 10px 20px -10px #e3f2fd; }
.button { box-shadow: 0 10px 20px -10px #bbdefb; }
.button { box-shadow: 0 10px 20px -10px #90caf9; }
.button { box-shadow: 0 10px 20px -10px #64b5f6; }
.button { box-shadow: 0 10px 20px -10px #42a5f5; }
.button { box-shadow: 0 10px 20px -10px #2196f3; }
.button { box-shadow: 0 10px 20px -10px #1e88e5; }
.button { box-shadow: 0 10px 20px -10px #1976d2; }
.button { box-shadow: 0 10px 20px -10px #1565c0; }
.button { box-shadow: 0 10px 20px -10px #0d47a1; }
.button { box-shadow: 0 10px 20px -10px #e1f5fe; }
.button { box-shadow: 0 10px 20px -10px #b3e5fc; }
.button { box-shadow: 0 10px 20px -10px #81d4fa; }
.button { box-shadow: 0 10px 20px -10px #4fc3f7; }
.button { box-shadow: 0 10px 20px -10px #29b6f6; }
.button { box-shadow: 0 10px 20px -10px #03a9f4; }
.button { box-shadow: 0 10px 20px -10px #039be5; }
.button { box-shadow: 0 10px 20px -10px #0288d1; }
.button { box-shadow: 0 10px 20px -10px #0277bd; }
.button { box-shadow: 0 10px 20px -10px #01579b; }
.button { box-shadow: 0 10px 20px -10px #e0f7fa; }
.button { box-shadow: 0 10px 20px -10px #b2ebf2; }
.button { box-shadow: 0 10px 20px -10px #80deea; }
.button { box-shadow: 0 10px 20px -10px #4dd0e1; }
.button { box-shadow: 0 10px 20px -10px #26c6da; }
.button { box-shadow: 0 10px 20px -10px #00bcd4; }
.button { box-shadow: 0 10px 20px -10px #00acc1; }
.button { box-shadow: 0 10px 20px -10px #0097a7; }
.button { box-shadow: 0 10px 20px -10px #00838f; }
.button { box-shadow: 0 10px 20px -10px #006064; }
.button { box-shadow: 0 10px 20px -10px #e0f2f1; }
.button { box-shadow: 0 10px 20px -10px #b2dfdb; }
.button { box-shadow: 0 10px 20px -10px #80cbc4; }
.button { box-shadow: 0 10px 20px -10px #4db6ac; }
.button { box-shadow: 0 10px 20px -10px #26a69a; }
.button { box-shadow: 0 10px 20px -10px #009688; }
.button { box-shadow: 0 10px 20px -10px #00897b; }
.button { box-shadow: 0 10px 20px -10px #00796b; }
.button { box-shadow: 0 10px 20px -10px #00695c; }
.button { box-shadow: 0 10px 20px -10px #004d40; }
.button { box-shadow: 0 10px 20px -10px #e8f5e9; }
.button { box-shadow: 0 10px 20px -10px #c8e6c9; }
.button { box-shadow: 0 10px 20px -10px #a5d6a7; }
.button { box-shadow: 0 10px 20px -10px #81c784; }
.button { box-shadow: 0 10px 20px -10px #66bb6a; }
.button { box-shadow: 0 10px 20px -10px #4caf50; }
.button { box-shadow: 0 10px 20px -10px #43a047; }
.button { box-shadow: 0 10px 20px -10px #388e3c; }
.button { box-shadow: 0 10px 20px -10px #2e7d32; }
.button { box-shadow: 0 10px 20px -10px #1b5e20; }
.button { box-shadow: 0 10px 20px -10px #f1f8e9; }
.button { box-shadow: 0 10px 20px -10px #dcedc8; }
.button { box-shadow: 0 10px 20px -10px #c5e1a5; }
.button { box-shadow: 0 10px 20px -10px #aed581; }
.button { box-shadow: 0 10px 20px -10px #9ccc65; }
.button { box-shadow: 0 10px 20px -10px #8bc34a; }
.button { box-shadow: 0 10px 20px -10px #7cb342; }
.button { box-shadow: 0 10px 20px -10px #689f38; }
.button { box-shadow: 0 10px 20px -10px #558b2f; }
.button { box-shadow: 0 10px 20px -10px #33691e; }
.button { box-shadow: 0 10px 20px -10px #f9fbe7; }
.button { box-shadow: 0 10px 20px -10px #f0f4c3; }
.button { box-shadow: 0 10px 20px -10px #e6ee9c; }
.button { box-shadow: 0 10px 20px -10px #dce775; }
.button { box-shadow: 0 10px 20px -10px #d4e157; }
.button { box-shadow: 0 10px 20px -10px #cddc39; }
.button { box-shadow: 0 10px 20px -10px #c0ca33; }
.button { box-shadow: 0 10px 20px -10px #afb42b; }
.button { box-shadow: 0 10px 20px -10px #9e9d24; }
.button { box-shadow: 0 10px 20px -10px #827717; }
.button { box-shadow: 0 10px 20px -10px #fffde7; }
.button { box-shadow: 0 10px 20px -10px #fff9c4; }
.button { box-shadow: 0 10px 20px -10px #fff59d; }
.button { box-shadow: 0 10px 20px -10px #fff176; }
.button { box-shadow: 0 10px 20px -10px #ffee58; }
.button { box-shadow: 0 10px 20px -10px #ffeb3b; }
.button { box-shadow: 0 10px 20px -10px #fdd835; }
.button { box-shadow: 0 10px 20px -10px #fbc02d; }
.button { box-shadow: 0 10px 20px -10px #f9a825; }
.button { box-shadow: 0 10px 20px -10px #f57f17; }
.button { box-shadow: 0 10px 20px -10px #fff8e1; }
.button { box-shadow: 0 10px 20px -10px #ffecb3; }
.button { box-shadow: 0 10px 20px -10px #ffe082; }
.button { box-shadow: 0 10px 20px -10px #ffd54f; }
.button { box-shadow: 0 10px 20px -10px #ffca28; }
.button { box-shadow: 0 10px 20px -10px #ffc107; }
.button { box-shadow: 0 10px 20px -10px #ffb300; }
.button { box-shadow: 0 10px 20px -10px #ffa000; }
.button { box-shadow: 0 10px 20px -10px #ff8f00; }
.button { box-shadow: 0 10px 20px -10px #ff6f00; }
.button { box-shadow: 0 10px 20px -10px #fff3e0; }
.button { box-shadow: 0 10px 20px -10px #ffe0b2; }
.button { box-shadow: 0 10px 20px -10px #ffcc80; }
.button { box-shadow: 0 10px 20px -10px #ffb74d; }
.button { box-shadow: 0 10px 20px -10px #ffa726; }
.button { box-shadow: 0 10px 20px -10px #ff9800; }
.button { box-shadow: 0 10px 20px -10px #fb8c00; }
.button { box-shadow: 0 10px 20px -10px #f57c00; }
.button { box-shadow: 0 10px 20px -10px #ef6c00; }
.button { box-shadow: 0 10px 20px -10px #e65100; }
.button { box-shadow: 0 10px 20px -10px #fbe9e7; }
.button { box-shadow: 0 10px 20px -10px #ffccbc; }
.button { box-shadow: 0 10px 20px -10px #ffab91; }
.button { box-shadow: 0 10px 20px -10px #ff8a65; }
.button { box-shadow: 0 10px 20px -10px #ff7043; }
.button { box-shadow: 0 10px 20px -10px #ff5722; }
.button { box-shadow: 0 10px 20px -10px #f4511e; }
.button { box-shadow: 0 10px 20px -10px #e64a19; }
.button { box-shadow: 0 10px 20px -10px #d84315; }
.button { box-shadow: 0 10px 20px -10px #bf360c; }
.button { box-shadow: 0 10px 20px -10px #efebe9; }
.button { box-shadow: 0 10px 20px -10px #d7ccc8; }
.button { box-shadow: 0 10px 20px -10px #bcaaa4; }
.button { box-shadow: 0 10px 20px -10px #a1887f; }
.button { box-shadow: 0 10px 20px -10px #8d6e63; }
.button { box-shadow: 0 10px 20px -10px #795548; }
.button { box-shadow: 0 10px 20px -10px #6d4c41; }
.button { box-shadow: 0 10px 20px -10px #5d4037; }
.button { box-shadow: 0 10px 20px -10px #4e342e; }
.button { box-shadow: 0 10px 20px -10px #3e2723; }
.button { box-shadow: 0 10px 20px -10px #f5f5f5; }
.button { box-shadow: 0 10px 20px -10px #e0e0e0; }
.button { box-shadow: 0 10px 20px -10px #bdbdbd; }
.button { box-shadow: 0 10px 20px -10px #9e9e9e; }
.button { box-shadow: 0 10px 20px -10px #eceff1; }
.button { box-shadow: 0 10px 20px -10px #cfd8dc; }
.button { box-shadow: 0 10px 20px -10px #b0bec5; }
.button { box-shadow: 0 10px 20px -10px #90a4ae; }