SpreadSimple is a no-code web app that allows you to easily and quickly create and manage a feature-rich website using only a spreadsheet.
However, while this type of tools allows you to build your website in a breeze, it lacks some customization features. That’s what we’ll try to cover in this article by showing you some CSS tricks that you can add to your store to give it a personal touch.
This article will be regularly updated according to our projects with this amazing tool.
Add a subtle Pulse effect behind your button
<style>
.sv-tile__btn {
display: block;
border-radius: 4px;
background: #cca92c;
cursor: pointer;
box-shadow: 0 0 0 rgba(204,169,44, 0.4);
animation: pulse 2s infinite;
}
.sv-tile__btn:hover {
animation: none;
}
@-webkit-keyframes pulse {
0% {
-webkit-box-shadow: 0 0 0 0 rgba(204,169,44, 0.4);
}
70% {
-webkit-box-shadow: 0 0 0 10px rgba(204,169,44, 0);
}
100% {
-webkit-box-shadow: 0 0 0 0 rgba(204,169,44, 0);
}
}
@keyframes pulse {
0% {
-moz-box-shadow: 0 0 0 0 rgba(204,169,44, 0.4);
box-shadow: 0 0 0 0 rgba(204,169,44, 0.4);
}
70% {
-moz-box-shadow: 0 0 0 10px rgba(204,169,44, 0);
box-shadow: 0 0 0 10px rgba(204,169,44, 0);
}
100% {
-moz-box-shadow: 0 0 0 0 rgba(204,169,44, 0);
box-shadow: 0 0 0 0 rgba(204,169,44, 0);
}
}
</style>Add rounded corners to your buttons
<style>
.sv-tile__btn {
border-radius: 40px;
}
</style>Add shadow to your buttons
.sv-tile__btn {
-webkit-box-shadow: -1px 12px 19px -2px rgba(0,0,0,0.38);
box-shadow: -1px 12px 19px -2px rgba(0,0,0,0.38);
}Use gradient background to your buttons
.sv-tile__btn {
background: #CE13C1;
background: -moz-linear-gradient(left, #CE13C1 0%, #A41A1A 100%, #C5BC2B 100%);
background: -webkit-linear-gradient(left, #CE13C1 0%, #A41A1A 100%, #C5BC2B 100%);
background: linear-gradient(to right, #CE13C1 0%, #A41A1A 100%, #C5BC2B 100%);
}