Jump to content

Recommended Posts

  • 2 weeks later...
  • Replies 5
  • Created
  • Last Reply

Top Posters In This Topic

  • 2 weeks later...
17 hours ago, jdillagodzilla said:

@tuanphan I would love that!

Add a Code Block

<a class="button tuan" href="#">Press me!</a>
.button::before, .button::after {
  position: absolute;
  content: '';
  -webkit-transition: all .5s;
  transition: all .5s;

.button {
  display: inline-block;
  padding: 20px 40px;
  color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  vertical-align: middle;
  font-family: 'Rubik One', sans-serif;
  text-decoration: none;
  font-size: 4vw;
  -webkit-transition: all .5s;
  transition: all .5s;
  background-color: #3498db;
.button::before {
  bottom: -15px;
  height: 15px;
  width: 100%;
  left: 8px;
  -webkit-transform: skewX(45deg);
          transform: skewX(45deg);
  background-color: #196090;
.button::after {
  right: -15px;
  height: 100%;
  width: 15px;
  bottom: -8px;
  -webkit-transform: skewY(45deg);
          transform: skewY(45deg);
  background-color: #124364;
.button:active {
  margin-left: 10px;
  margin-top: 10px;
.button:active::before {
  bottom: -5px;
  height: 5px;
  left: 3px;
.button:active::after {
  right: -5px;
  width: 5px;
  bottom: -3px;


Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.