Instantly share code, notes, and snippets.
Created
January 27, 2017 06:06
-
Star
0
(0)
You must be signed in to star a gist -
Fork
0
(0)
You must be signed in to fork a gist
-
Save galileoguzman/1c4ad296da06cc745259399e5ab73de2 to your computer and use it in GitHub Desktop.
Floating button for any call to action.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Floating Button!</title> | |
| <style type="text/css"> | |
| *{ | |
| border: 0; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| body{ | |
| background-color: orange; | |
| font-size: 19px; | |
| } | |
| .wrapper{ | |
| background-color: purple; | |
| color: white; | |
| margin: 0 auto; | |
| width: 85%; | |
| } | |
| .wrapper h1{ | |
| text-align: center; | |
| } | |
| .wrapper p{ | |
| margin-top: 1em; | |
| padding: 0.5em 0.3em; | |
| } | |
| .floating-button{ | |
| padding: 1.5em; | |
| position: fixed; | |
| } | |
| .left{left: 0;} | |
| .bottom{bottom: 0;} | |
| .right{right: 0;} | |
| .top{top: 0;} | |
| .icon-circle{ | |
| border-radius: 50%; | |
| height: 75px; | |
| width: 75px; | |
| text-align: center; | |
| box-shadow: 5px 5px 10px rgba(0,0,0,0.7); | |
| } | |
| .icon-circle a{ | |
| font-size: 0.5em; | |
| margin: 0 auto; | |
| } | |
| .background-white{ | |
| background-color: white; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="floating-button top left"> | |
| <div class="icon-circle background-white"> | |
| <a href="#">Action</a> | |
| </div> | |
| </div> | |
| <div class="wrapper"> | |
| <h1>This is a title</h1> | |
| <p><!-- start slipsum code -->Look, just because I don't be givin' no man a foot massage don't make it right for Marsellus to throw Antwone into a glass motherfuckin' house, fuckin' up the way the nigger talks. Motherfucker do that shit to me, he better paralyze my ass, 'cause I'll kill the motherfucker, know what I'm sayin'?<!-- end slipsum code --></p> | |
| <p><!-- start slipsum code -->Look, just because I don't be givin' no man a foot massage don't make it right for Marsellus to throw Antwone into a glass motherfuckin' house, fuckin' up the way the nigger talks. Motherfucker do that shit to me, he better paralyze my ass, 'cause I'll kill the motherfucker, know what I'm sayin'?<!-- end slipsum code --></p> | |
| <p><!-- start slipsum code -->Look, just because I don't be givin' no man a foot massage don't make it right for Marsellus to throw Antwone into a glass motherfuckin' house, fuckin' up the way the nigger talks. Motherfucker do that shit to me, he better paralyze my ass, 'cause I'll kill the motherfucker, know what I'm sayin'?<!-- end slipsum code --></p> | |
| <p><!-- start slipsum code -->Look, just because I don't be givin' no man a foot massage don't make it right for Marsellus to throw Antwone into a glass motherfuckin' house, fuckin' up the way the nigger talks. Motherfucker do that shit to me, he better paralyze my ass, 'cause I'll kill the motherfucker, know what I'm sayin'?<!-- end slipsum code --></p> | |
| <p><!-- start slipsum code -->Look, just because I don't be givin' no man a foot massage don't make it right for Marsellus to throw Antwone into a glass motherfuckin' house, fuckin' up the way the nigger talks. Motherfucker do that shit to me, he better paralyze my ass, 'cause I'll kill the motherfucker, know what I'm sayin'?<!-- end slipsum code --></p> | |
| <p><!-- start slipsum code -->Look, just because I don't be givin' no man a foot massage don't make it right for Marsellus to throw Antwone into a glass motherfuckin' house, fuckin' up the way the nigger talks. Motherfucker do that shit to me, he better paralyze my ass, 'cause I'll kill the motherfucker, know what I'm sayin'?<!-- end slipsum code --></p> | |
| <p><!-- start slipsum code -->Look, just because I don't be givin' no man a foot massage don't make it right for Marsellus to throw Antwone into a glass motherfuckin' house, fuckin' up the way the nigger talks. Motherfucker do that shit to me, he better paralyze my ass, 'cause I'll kill the motherfucker, know what I'm sayin'?<!-- end slipsum code --></p> | |
| <p><!-- start slipsum code -->Look, just because I don't be givin' no man a foot massage don't make it right for Marsellus to throw Antwone into a glass motherfuckin' house, fuckin' up the way the nigger talks. Motherfucker do that shit to me, he better paralyze my ass, 'cause I'll kill the motherfucker, know what I'm sayin'?<!-- end slipsum code --></p> | |
| <p><!-- start slipsum code -->Look, just because I don't be givin' no man a foot massage don't make it right for Marsellus to throw Antwone into a glass motherfuckin' house, fuckin' up the way the nigger talks. Motherfucker do that shit to me, he better paralyze my ass, 'cause I'll kill the motherfucker, know what I'm sayin'?<!-- end slipsum code --></p> | |
| <p><!-- start slipsum code -->Look, just because I don't be givin' no man a foot massage don't make it right for Marsellus to throw Antwone into a glass motherfuckin' house, fuckin' up the way the nigger talks. Motherfucker do that shit to me, he better paralyze my ass, 'cause I'll kill the motherfucker, know what I'm sayin'?<!-- end slipsum code --></p> | |
| <p><!-- start slipsum code -->Look, just because I don't be givin' no man a foot massage don't make it right for Marsellus to throw Antwone into a glass motherfuckin' house, fuckin' up the way the nigger talks. Motherfucker do that shit to me, he better paralyze my ass, 'cause I'll kill the motherfucker, know what I'm sayin'?<!-- end slipsum code --></p> | |
| <p><!-- start slipsum code -->Look, just because I don't be givin' no man a foot massage don't make it right for Marsellus to throw Antwone into a glass motherfuckin' house, fuckin' up the way the nigger talks. Motherfucker do that shit to me, he better paralyze my ass, 'cause I'll kill the motherfucker, know what I'm sayin'?<!-- end slipsum code --></p> | |
| <p><!-- start slipsum code -->Look, just because I don't be givin' no man a foot massage don't make it right for Marsellus to throw Antwone into a glass motherfuckin' house, fuckin' up the way the nigger talks. Motherfucker do that shit to me, he better paralyze my ass, 'cause I'll kill the motherfucker, know what I'm sayin'?<!-- end slipsum code --></p> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment