SpreadSimple CSS Tricks : How to Customize Your Site With CSS

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%);

}

Leave a Comment