Jump to content

Floating/sticky e-mail icon that links to contact page

Recommended Posts

Site URL: http://www.believestudio.co.uk

Hi there, I'm not the best when it comes css, html etc so I was just wondering if anybody could help me! Usually I would find a tutorial and just follow that but this was getting a bit complicated for me. 

I want a floating/sticky button in the left hand corner of my website which links to my contact page. I was thinking about having a little envelope icon instead of text.

Thanks in advance for any suggestions and tips. Really appreciate it! 



Link to comment
  • Replies 1
  • Views 897
  • Created
  • Last Reply

Add to Home > Settings > Advanced > Code Injection > Footer

<a href="https://example.com/contact" class="tuan"><span class="arrow"></span></a>

Add this to Home > Design > Custom CSS

.tuan {
    font-weight: 300;
    letter-spacing: 3px;
    font-size: 15px;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.6;
    padding-left: 2px;
    padding-top: 4px;
    position: fixed;
    left: 30px;
    bottom: 30px;
    width: 40px;
    height: 40px;
    z-index: 999;
    background-color: transparent;
    color: #000;


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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment


This topic is now archived and is closed to further replies.

  • 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.