Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <svg id="svg-source" height="0" version="1.1" 
xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink" style="position: absolute">
  <g id="globe" data-iconmelon="Simple Line Icons:ac44ad7e025985c356d6e2008b8a6bbb">
  <g>
  <path  d="M28.74,19.854l-2.132,2.133l-1.754-1.754c2.733-3.042,3.458-7.231,2.175-10.899l0,0V9.332
  c-0.525-1.497-1.349-2.906-2.542-4.101c-2.06-2.062-4.808-3.199-7.727-3.199c-0.205,0-0.402,0.046-0.607,0.059
  C16.09,2.098,16.03,2.084,15.97,2.108c-2.421,0.175-4.676,1.127-6.481,2.755L7.734,3.108l2.129-2.129
  c0.224-0.225,0.224-0.587,0-0.812c-0.225-0.224-0.589-0.224-0.813,0L6.517,2.702c-5.65,5.655-5.65,14.852,0,20.502
  c2.714,2.713,6.247,4.11,9.81,4.22c-0.211,1.082-0.953,3.431-3.462,3.431h-0.717c-0.317,0-0.575,0.258-0.575,0.572
  c0,0.315,0.258,0.573,0.575,0.573h9.237c0.317,0,0.577-0.258,0.577-0.573c0-0.314-0.26-0.572-0.577-0.572h-5.562
  c1.025-0.983,1.499-2.382,1.664-3.446c3.466-0.172,6.884-1.561,9.527-4.204l2.539-2.539c0.224-0.225,0.224-0.585,0-0.812
  C29.328,19.63,28.964,19.63,28.74,19.854z M23.675,19.866c-1.847,1.847-4.298,2.865-6.911,2.865c-2.607,0-5.064-1.019-6.909-2.865
  C8.7,18.712,7.937,17.323,7.482,15.86l1.015-0.311l1.33,0.968c0.102,0.073,0.222,0.109,0.339,0.109
  c0.162,0,0.326-0.073,0.438-0.206l1.973-2.317c0.15-0.171,0.187-0.41,0.093-0.617c-0.093-0.203-0.298-0.336-0.522-0.336h-1.403
  l-0.736-0.509L9.964,11.69l0.931-0.648c0.15-0.106,0.243-0.282,0.243-0.471V7.172c0-0.316-0.257-0.573-0.571-0.573H9.4
  C9.559,6.415,9.68,6.217,9.854,6.044c1.48-1.482,3.357-2.399,5.388-2.715l-0.654,1.423c-0.096,0.216-0.055,0.468,0.109,0.637
  l1.087,1.135c0.049,0.053,0.106,0.092,0.169,0.124l2.223,1.046c0.169,0.076,0.355,0.068,0.512-0.012c0,0,0.547-0.288,0.892-0.503
  c0.339,0,1.417,0.242,2.345,0.498l1.721,2.03c0.109,0.126,0.269,0.201,0.438,0.201h1.923
  C27.117,13.301,26.367,17.177,23.675,19.866z M8.514,7.745h1.478v2.528L9.045,10.93c-0.162,0.112-0.255,0.301-0.241,0.498
  l0.068,1.552c0.009,0.181,0.102,0.343,0.249,0.447l1.116,0.771c0.097,0.065,0.211,0.101,0.329,0.101h0.314l-0.812,0.975
  l-1.133-0.818c-0.146-0.106-0.334-0.134-0.504-0.085L7.17,14.757C6.727,12.372,7.182,9.86,8.514,7.745z M23.675,6.044
  c0.808,0.808,1.406,1.738,1.874,2.716h-1.201l-1.663-1.959c-0.074-0.087-0.17-0.149-0.279-0.181
  c-2.843-0.807-3.185-0.58-3.374-0.454c-0.166,0.111-0.432,0.26-0.623,0.364l-1.869-0.876l-0.744-0.777L16.566,3.2
  c0.065-0.003,0.129-0.02,0.194-0.02C19.374,3.181,21.828,4.196,23.675,6.044z M6.963,3.964l1.713,1.715
  C8.36,6.029,8.057,6.381,7.794,6.76c-0.011,0.011-0.017,0.024-0.03,0.038c-2.908,4.25-2.495,10.109,1.278,13.881
  c2.063,2.063,4.805,3.2,7.722,3.2c2.725,0,5.272-1.024,7.278-2.835l1.712,1.713c-5.229,4.793-13.36,4.699-18.425-0.365
  C2.265,17.33,2.169,9.195,6.963,3.964z"></path>
  <path  d="M19.341,14.359c-0.132-0.174-0.358-0.251-0.574-0.215c-0.214,0.044-0.389,0.211-0.438,0.425
  c-0.096,0.374-0.207,0.796-0.309,1.135c-0.358-0.274-0.903-0.652-1.727-1.175l-2.126-1.296c-0.147-0.092-0.343-0.106-0.504-0.041
  c-0.169,0.063-0.295,0.203-0.347,0.375l-0.484,1.699l-1.582,1.979c-0.079,0.103-0.123,0.229-0.123,0.359v1.964
  c0,0.263,0.178,0.493,0.432,0.557l2.934,0.724h4.392c0.112,0,0.222-0.036,0.314-0.096l1.814-1.188
  c0.159-0.106,0.255-0.287,0.255-0.48v-1.996c0-0.126-0.039-0.246-0.112-0.348L19.341,14.359z M20.121,18.774l-1.409,0.924
  l-4.077,0.018l-2.361-0.594v-1.316l1.529-1.909c0.047-0.061,0.082-0.129,0.104-0.203l0.31-1.083l1.472,0.895
  c0.857,0.544,1.875,1.255,1.981,1.346c0.079,0.235,0.325,0.425,0.572,0.425c0.383,0,0.569-0.14,0.897-1.283l0.982,1.288V18.774z"></path>
  <path  d="M24.89,10.203h-2.126c-0.317,0-0.574,0.259-0.574,0.575v2.175c0,0.182,0.088,0.349,0.229,0.46
  c0.099,0.073,0.222,0.113,0.345,0.113c0.053,0,0.107-0.005,0.162-0.021l2.125-0.619c0.244-0.07,0.414-0.295,0.414-0.552v-1.556
  C25.465,10.462,25.207,10.203,24.89,10.203z M24.315,11.904l-0.978,0.284v-0.837h0.978V11.904z"></path>
  </g>
  </g>
  <g id="tag" data-iconmelon="Simple Line Icons:1fe3f7f1481514daa19bb506d8563303">
  <g>
  <path  d="M16.001,0C10.448,0,5.933,4.517,5.933,10.067c0,4.068,4.008,11.777,7.373,17.527
  c1.249,2.135,2.151,3.557,2.151,3.557L16.001,32l0.541-0.849c0,0,0.904-1.422,2.152-3.557c3.363-5.75,7.374-13.459,7.374-17.527
  C26.068,4.517,21.551,0,16.001,0z M17.584,26.945c-0.649,1.112-1.204,2.026-1.583,2.644c-0.382-0.617-0.937-1.531-1.585-2.644
  c-2.69-4.598-7.199-12.899-7.199-16.878c0-4.842,3.939-8.781,8.784-8.781c4.842,0,8.781,3.939,8.781,8.781
  C24.782,14.046,20.272,22.348,17.584,26.945z"></path>
  <path  d="M16.001,3.771c-3.473,0-6.298,2.825-6.298,6.297c0,3.475,2.825,6.297,6.298,6.297
  c3.472,0,6.296-2.822,6.296-6.297C22.297,6.596,19.473,3.771,16.001,3.771z M16.001,15.079c-2.765,0-5.013-2.246-5.013-5.012
  c0-2.762,2.248-5.01,5.013-5.01c2.762,0,5.011,2.248,5.011,5.01C21.012,12.833,18.763,15.079,16.001,15.079z"></path>
  </g>
  </g>
  <g id="search" data-iconmelon="Simple Line Icons:30cb2d53906317e06f9f6dc22d2d1f43">
  <g>
  <path  d="M21.789,20.972c-0.091-0.087-0.203-0.11-0.318-0.132c2.149-2.305,3.354-5.265,3.354-8.43
  c0.003-3.312-1.29-6.43-3.633-8.772C18.847,1.291,15.729,0,12.415,0C9.1,0,5.983,1.291,3.636,3.638
  C1.293,5.98,0.001,9.099,0.003,12.413c0,3.315,1.293,6.433,3.639,8.776c2.342,2.344,5.458,3.635,8.773,3.635
  c3.162,0,6.124-1.206,8.426-3.352c0.021,0.113,0.044,0.228,0.129,0.316L31.015,31.83c0.11,0.111,0.259,0.17,0.407,0.17
  s0.294-0.059,0.407-0.17c0.225-0.225,0.225-0.59,0-0.814L21.789,20.972z M20.373,20.374c-2.126,2.124-4.952,3.297-7.958,3.297
  c-3.005,0-5.832-1.173-7.96-3.297c-2.126-2.127-3.297-4.952-3.297-7.961C1.155,9.406,2.327,6.58,4.452,4.453
  c2.129-2.127,4.958-3.3,7.963-3.3c3.006,0,5.832,1.173,7.961,3.3c2.125,2.127,3.297,4.952,3.297,7.957
  C23.673,15.417,22.499,18.244,20.373,20.374z"></path>
  <path  d="M3.044,12.416h1.152c0-4.53,3.69-8.219,8.219-8.219V3.043C7.249,3.043,3.044,7.248,3.044,12.416z"></path>
  </g>
  </g>
  <g id="mail" data-iconmelon="Simple Line Icons:efde060e31712950096428f302bdd271">
  <g>
  <path  d="M32,6.36c0-0.067-0.049-0.112-0.074-0.174c-0.019-0.059-0.008-0.124-0.049-0.178
  c-0.011-0.012-0.024-0.01-0.033-0.018c-0.049-0.058-0.117-0.074-0.186-0.108c-0.068-0.031-0.123-0.077-0.197-0.081
  c-0.014-0.002-0.021-0.016-0.035-0.016H0.574c-0.014,0-0.021,0.014-0.035,0.016C0.463,5.806,0.408,5.851,0.342,5.882
  C0.273,5.917,0.205,5.935,0.153,5.99C0.148,5.999,0.131,5.997,0.121,6.008C0.082,6.062,0.093,6.127,0.074,6.187
  C0.049,6.248,0,6.293,0,6.36V25.64c0,0.067,0.049,0.112,0.074,0.173c0.019,0.061,0.008,0.126,0.047,0.179
  c0.01,0.012,0.021,0.007,0.032,0.017c0.104,0.121,0.249,0.206,0.421,0.206h30.852c0.172,0,0.314-0.085,0.421-0.206
  c0.011-0.01,0.02-0.005,0.03-0.017c0.041-0.053,0.03-0.118,0.049-0.179C31.951,25.752,32,25.707,32,25.64V6.36z M1.149,7.531
  l10.922,8.47L1.149,24.469V7.531z M18.648,15.543c-0.003,0.001-0.008,0-0.008,0.001l-2.496,1.94l-0.142,0.11l-0.12-0.092
  l-2.518-1.958c-0.006-0.001-0.008,0-0.014-0.001l-11.1-8.609h27.494L18.648,15.543z M13.01,16.727l2.641,2.046
  c0.057,0.046,0.131,0.048,0.196,0.068c0.038,0.01,0.068,0.036,0.112,0.038c0.017,0.002,0.027,0.017,0.044,0.017
  c0.014,0,0.024-0.015,0.041-0.015c0.041-0.004,0.071-0.026,0.109-0.038c0.068-0.02,0.143-0.024,0.202-0.07l2.641-2.046l10.75,8.34
  H2.252L13.01,16.727z M19.932,16.001l10.92-8.47v16.938L19.932,16.001z"></path>
  </g>
  </g>
  <g id="cloud" data-iconmelon="80 icons pack:79714dfb789cfecd5d2190df159d8ec1">
  <g>
  <g>
  <path d="M6.824,25.331H6.815c-3.817-0.06-6.874-3.212-6.814-7.029c0.058-3.758,3.161-6.815,6.919-6.815l0.109,0.001
  c0.602,0.01,1.193,0.096,1.768,0.258c1.477-3.068,4.611-5.076,8.055-5.076l0.142,0.001c4.103,0.063,7.557,2.854,8.528,6.758
  c0.186-0.019,0.371-0.027,0.555-0.027l0.088,0c3.268,0.05,5.886,2.75,5.836,6.018c-0.051,3.218-2.709,5.835-5.926,5.835H25.98
  L6.824,25.331z M6.92,13.25c-2.8,0-5.112,2.278-5.156,5.079c-0.043,2.841,2.23,5.189,5.07,5.239l19.157-0.076h0.083
  c2.26,0,4.127-1.839,4.162-4.099c0.035-2.296-1.805-4.192-4.1-4.228h-0.061c-0.336,0-0.685,0.045-1.035,0.134l-0.949,0.242
  l-0.141-0.97c-0.51-3.501-3.448-6.083-6.986-6.137l-0.113-0.001c-2.998,0-5.705,1.897-6.736,4.721l-0.318,0.873l-0.855-0.364
  C8.322,13.4,7.67,13.261,7.002,13.251L6.92,13.25z"></path>
  </g>
  </g>
  </g>
  <g id="geotag" data-iconmelon="80 icons pack:18186d30db5545dfc173a108899bc251">
  <g>
  <g>
  <path d="M16,0c-5.354,0-9.693,4.341-9.693,9.694c0,2.78,1.177,5.28,3.051,7.048L15.964,32l6.56-15.151
  c1.942-1.772,3.17-4.318,3.17-7.155C25.693,4.341,21.354,0,16,0 M16,15.054c-3.083,0-5.582-2.5-5.582-5.583
  c0-3.083,2.499-5.583,5.582-5.583s5.582,2.5,5.582,5.583C21.582,12.554,19.083,15.054,16,15.054"></path>
  </g>
  </g>
  </g>
  <g id="trash" data-iconmelon="80 icons pack:bd59435a5c38a7a121ed98ee8c12653f">
  <g>
  <g>
  <path d="M25.868,3.806h-3.923V1.902C21.945,0.854,21.092,0,20.043,0h-8.085c-1.049,0-1.902,0.854-1.902,1.902v1.903H6.133
  c-1.049,0-1.902,0.853-1.902,1.901v3.924c0,1.049,0.854,1.902,1.902,1.902h0.68c-0.011,0.085-0.025,0.168-0.025,0.256v18.31
  C6.787,31.147,7.64,32,8.689,32h14.622c1.05,0,1.902-0.853,1.902-1.901v-18.31c0-0.088-0.014-0.171-0.026-0.256h0.681
  c1.05,0,1.902-0.854,1.902-1.902V5.707C27.771,4.658,26.918,3.806,25.868,3.806z M11.958,1.902h8.085v1.903h-8.085V1.902z
  M8.689,30.099v-18.31h14.622l0.002,18.31H8.689z M6.133,9.631V5.707h4.874h9.987h4.874l0.001,3.924H6.133z"></path>
  </g>
  <g>
  <path d="M11.424,12.781c-0.525,0-0.951,0.426-0.951,0.95v14.426c0,0.524,0.426,0.951,0.951,0.951c0.524,0,0.95-0.427,0.95-0.951
  V13.731C12.374,13.207,11.948,12.781,11.424,12.781z"></path>
  </g>
  <g>
  <path d="M16,12.781c-0.524,0-0.95,0.426-0.95,0.95v14.426c0,0.524,0.426,0.951,0.95,0.951c0.525,0,0.951-0.427,0.951-0.951V13.731
  C16.951,13.207,16.525,12.781,16,12.781z"></path>
  </g>
  <g>
  <path d="M20.578,12.781c-0.525,0-0.952,0.426-0.952,0.95v14.426c0,0.524,0.427,0.951,0.952,0.951s0.95-0.427,0.95-0.951V13.731
  C21.528,13.207,21.104,12.781,20.578,12.781z"></path>
  </g>
  </g>
  </g>
  <g id="mail1" data-iconmelon="80 icons pack:e0c615ea15c8a534ff67768611f99530">
  <g>
  <g>
  <path d="M30.143,4.542H1.857C0.834,4.542,0,5.375,0,6.399v19.201c0,1.024,0.834,1.858,1.857,1.858h28.285
  c1.023,0,1.857-0.833,1.857-1.858V6.399C32,5.375,31.166,4.542,30.143,4.542z M29.522,23.992l-9.114-5.883l9.114-9.114V23.992z
  M14.687,21.205c0.362,0.362,0.837,0.542,1.313,0.542c0.476,0,0.951-0.181,1.314-0.543l2.198-2.199l9.259,5.977H3.205l9.279-5.979
  L14.687,21.205z M27.994,7.019L16,19.014L4.006,7.019H27.994z M11.588,18.105l-9.11,5.871V8.995L11.588,18.105z"></path>
  </g>
  </g>
  </g>
  <g id="map" data-iconmelon="80 icons pack:a8e1bb63d94e793c6286368efcf68a4d">
  <g>
  <g>
  <path d="M30.431,3.775l-7.826-2.128c-0.185-0.051-0.372-0.075-0.559-0.075c-0.374,0-0.74,0.104-1.066,0.292
  c-0.325-0.189-0.692-0.292-1.066-0.292c-0.187,0-0.374,0.024-0.558,0.075l-7.826,2.128c-0.184,0.049-0.351,0.127-0.509,0.22
  c-0.158-0.093-0.325-0.171-0.509-0.22L2.686,1.647C2.501,1.597,2.313,1.572,2.127,1.572c-0.462,0-0.917,0.151-1.292,0.438
  C0.309,2.412,0,3.037,0,3.7v22.473c0,0.96,0.643,1.801,1.569,2.053l7.826,2.127c0.185,0.05,0.372,0.075,0.559,0.075
  c0.373,0,0.74-0.103,1.066-0.292c0.325,0.189,0.692,0.292,1.066,0.292c0.187,0,0.374-0.024,0.558-0.075l7.827-2.127
  c0.183-0.049,0.35-0.128,0.508-0.22c0.158,0.092,0.326,0.171,0.509,0.22l7.826,2.127c0.185,0.05,0.372,0.075,0.559,0.075
  c0.461,0,0.917-0.151,1.292-0.437C31.691,29.588,32,28.963,32,28.3V5.828C32,4.868,31.357,4.027,30.431,3.775z M9.954,28.3
  l-7.827-2.127V3.7l7.827,2.128V28.3z M19.913,10.94c-0.009,0.007-0.019,0.012-0.027,0.02c-0.229,0.185-0.263,0.52-0.077,0.749
  c0.028,0.036,0.068,0.055,0.104,0.082v14.383L12.087,28.3v-4.857c0.016,0,0.032,0.002,0.048,0.002h0.002
  c0.499,0,0.983-0.092,1.441-0.274c0.273-0.108,0.406-0.417,0.298-0.69c-0.107-0.273-0.416-0.407-0.69-0.298
  c-0.332,0.132-0.685,0.199-1.049,0.199h-0.001c-0.017,0-0.033-0.004-0.049-0.004V5.828L19.913,3.7V10.94z M29.873,28.3
  l-7.827-2.127V11.244c0.179,0.007,0.361,0.038,0.551,0.091c0.281,0.08,0.576-0.084,0.656-0.367s-0.084-0.577-0.367-0.656
  c-0.284-0.081-0.563-0.122-0.84-0.13V3.7l7.827,2.128V28.3z"></path>
  </g>
  <g>
  <path d="M4.519,17.446c0.099,0.168,0.276,0.26,0.457,0.26c0.093,0,0.187-0.024,0.271-0.074c0.253-0.15,0.335-0.477,0.186-0.729
  c-0.237-0.4-0.437-0.777-0.59-1.12c-0.12-0.269-0.436-0.389-0.702-0.268c-0.269,0.12-0.389,0.435-0.269,0.703
  C4.042,16.598,4.26,17.012,4.519,17.446z"></path>
  </g>
  <g>
  <path d="M8.097,21.7c0.099,0.081,0.219,0.121,0.337,0.121c0.154,0,0.307-0.067,0.412-0.194c0.186-0.227,0.153-0.562-0.073-0.749
  c-0.618-0.508-1.233-1.128-1.828-1.844c-0.188-0.226-0.523-0.257-0.749-0.069s-0.257,0.524-0.068,0.75
  C6.765,20.48,7.427,21.148,8.097,21.7z"></path>
  </g>
  <g>
  <path d="M17.283,16.461c0.064,0.025,0.131,0.037,0.195,0.037c0.212,0,0.412-0.127,0.494-0.337
  c0.395-0.998,0.739-1.761,1.087-2.403c0.14-0.258,0.044-0.581-0.214-0.721c-0.259-0.14-0.581-0.044-0.722,0.214
  c-0.368,0.68-0.731,1.481-1.141,2.521C16.876,16.045,17.01,16.354,17.283,16.461z"></path>
  </g>
  <g>
  <path d="M15.118,21.399c0.09,0.058,0.191,0.086,0.29,0.086c0.174,0,0.345-0.085,0.446-0.241c0.42-0.643,0.811-1.61,1.169-2.56
  c0.104-0.275-0.034-0.582-0.31-0.686c-0.273-0.104-0.581,0.035-0.686,0.31c-0.337,0.893-0.7,1.796-1.064,2.354
  C14.804,20.909,14.872,21.238,15.118,21.399z"></path>
  </g>
  <g>
  <path d="M23.925,15.653c0.103,0.096,0.233,0.144,0.364,0.144c0.142,0,0.283-0.056,0.388-0.167l1.397-1.49l1.398,1.49
  c0.105,0.111,0.246,0.167,0.389,0.167c0.13,0,0.261-0.048,0.363-0.144c0.215-0.201,0.226-0.538,0.023-0.752l-1.443-1.539
  l1.443-1.538c0.202-0.214,0.191-0.551-0.023-0.752s-0.551-0.19-0.752,0.024l-1.372,1.462c-0.243-0.256-0.483-0.5-0.717-0.713
  c-0.003-0.002-0.006-0.002-0.008-0.005l-0.699-0.744c-0.201-0.214-0.538-0.225-0.752-0.024c-0.214,0.201-0.225,0.538-0.023,0.752
  l1.443,1.538l-1.443,1.539C23.7,15.116,23.711,15.452,23.925,15.653z"></path>
  </g>
  </g>
  </g>
</svg>

<div class="btn_container">
  <h1 class="header">Scalable Icons</h1>
  <p class="explain">Resize your browser and hover to see transitions</p>
  <div class='btn' data-attr="Map_">  
    <div class="svg_icon">
      <svg viewBox="0 0 32 32">
          <g filter="">
            <use xlink:href="#globe"></use>
          </g>
       </svg>
     </div>
     <div class="btn_text">
        Map_
     </div>
  </div>
  <div class='btn' data-attr="Cloud_">  
    <div class="svg_icon">
      <svg viewBox="0 0 32 32">
          <g filter="">
            <use xlink:href="#cloud"></use>
          </g>
       </svg>
     </div>
     <div class="btn_text">
        Cloud_
      </div>
    </div>
  <div class='btn' data-attr="Location_">  
    <div class="svg_icon">
      <svg viewBox="0 0 32 32">
          <g filter="">
            <use xlink:href="#tag"></use>
          </g>
       </svg>
     </div>
     <div class="btn_text">
        Location_
      </div>
    </div>
</div>

<div class="text_container">
	<h1 class="header">Link pop ups</h1>
  <p class="explain">link pop up stating the hyperlink of the page</p>
  <p class="dummy_text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et <span><a href="#" data-attr="www.go_to.com">magnis</a></span> dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel,  <span><a href="#" data-attr="www.go_to.com">aliquet</a></span> nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, <span><a href="#" data-attr="www.go_to.com">tincidunt</a></span> eu, consequat vitae, eleifend ac, enim. <span><a href="#" data-attr="www.go_to.com">eleifend</a></span>  lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. <span><a href="#" data-attr="www.go_to.com">tincidunt</a></span> nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</p>
</div>

     
              
            
!

CSS

              
                @import "compass/css3";

@import url(https://fonts.googleapis.com/css?family=Roboto);
@import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);

$font_2 :  'Open Sans', sans-serif;
$font_3 :  'Open Sans Condensed', sans-serif;
$base_font : 1em;

$bezier : cubic-bezier(0.455, 0.030, 0.515, 0.955);

$le_text    :   #333333;
$le_blue    :   lighten(#66CCFF,15%);
$le_white   : 	#FFFFFF;

$screen-sm-min: 768px;

@mixin font-family( $font, $base_font ) {
  font-family : $font;
  font-size   : $base_font;
}
@mixin hover_1_set ( $top , $right , $left , $bottom , $height , $width ) {
  top   : $top;
  right : $right;
  bottom: $bottom;
  left  : $left;
  height: $height;
  width : $width;
}
* {
  margin  : 0;
  padding : 0;
}
.center_one {
  display: table-cell; 
  vertical-align: middle;
}
body {
    @include background(radial-gradient(ellipse,	 #e2e6f0 , darken( #FFFFFF , 5%)));
}
.btn_container , .text_container {
  position : relative;
  display  : inline-block; 
  width    : 100%;
  margin   : 5% auto 0 auto;
  text-align : center;
}
.header {
  @include  font-family( $font_3 , 2.9em );
  font-weight : 100;
  color : lighten( $le_text, 30% );
  letter-spacing : 1.2px;
}
.explain {
   @include  font-family( $font_3 , 1.5em );
   color : lighten( $le_text, 30% );
   margin : 15px 0 35px 0;
   letter-spacing : .7px;
}
.btn {
	position : relative;
  display  : inline-block;
  background : darken($le_white,2%);
  width  : 200px;
  margin : 0 20px;
  cursor : pointer;
  @include transition (.2s ease-in-out);
  @include single-box-shadow(rgba(0,0,0,0.2),0,2px,3px,0); 
   &:before {
    content  : '';
    position : absolute;
    background : $le_blue;
    @include hover_1_set(0,0,auto,0,100%,0%);
    @include transition (.3s ease-in-out);
  }
  &:hover:before {
    @include hover_1_set(0,auto,0,0,100%,100%);
    @include transition (.3s ease-in-out);
  }
  @media (max-width: $screen-sm-min) {
    width : auto;
    .btn_text {
      display : none;
    }
    .svg_icon{
      border : none;
      padding : 16px 16px 16px 16px;
      &:hover {
         background : $le_blue;
         @include transition (.2s ease-in-out);
      }
    }
    &:after {
      content : attr(data-attr);
      position : absolute;
      @include hover_1_set(0,0,0,0,40px,200%);
      padding-top   : 10px;
      opacity : 0;
      color  : $le_white;
      background : lighten($le_blue,2%); 
      margin-left : -40%;
      @include font-family($font_3,$base_font * 1.2);
      @include transition (.3s cubic-bezier(0.000, 1.650, 0.800, 1.650) );
    }
    &:hover:after {
       opacity : 1;
       margin-top : -60px;
       @include transition (.3s cubic-bezier(0.000, 1.650, 0.800, 1.650) );
    }
  }
}
.svg_icon{
  float : left;
  position: relative;
  width: 40px;
  height: 40px;
  fill: $le_text ;
  background : darken($le_white,5%);
  padding : 10px 6px 10px 6px;
  border-right : 1px dotted rgba(0,0,0,0.1);
  @include transition (.2s ease-in-out);
}

.btn_text {
  position : relative;
  float : left;
  letter-spacing : 0.7px;
  color : $le_text;
  @include font-family($font_3,$base_font * 1.5);
  padding : 15px 0px 10px 26px;
}
.dummy_text {
   padding : 0 70px; 
   color : $le_text;
   letter-spacing : 1.2px;
   line-height: 170%;
   @include font-family($font_3,$base_font * 1.5);
   span {
     position : relative;
     &:before {
       content : ""; 
       position : absolute;
       background : $le_white;
       @include hover_1_set(0,0,0,0,100%,100%);
       @include  scale(0,0);
       @include transition (.2s ease-out );
     }
     &:hover:before {
       @include  scale(1,1);
       @include transition (.3s cubic-bezier(0.000, 1.650, 0.800, 1.650) );
     }
     a {
       @include font-family($font_3,$base_font * 1 );
       position : relative;
       letter-spacing : 1.2px;
       text-decoration : none;
       color : darken($le_blue,15%);
      &:after {
        content : "link to : " attr(data-attr);
        position : absolute;
        opacity : 0;
        color  : $le_text;
        background  : lighten($le_blue,2%); 
        margin-left : -150%; 
        @include hover_1_set(0,0,0,0,40px,400%);
        @include scale(1,0);
        @include font-family($font_3,$base_font);
        @include transition (.3s cubic-bezier(0.455, 0.030, 0.515, 0.955) );
      }
      &:hover:after {
         opacity : 1;
         margin-top : -60px;
         @include scale(1,1);
         @include transition (.3s cubic-bezier(0.455, 0.030, 0.515, 0.955),opacity .3s ease);
      }
     }
   }
}




              
            
!

JS

              
                // thijsoa.com
// icons can be found on www.iconmelon.com , they provide some clever ways to place svg's in your html
// thanks for watching!
              
            
!
999px

Console