123

Pen Settings

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

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <div>
	<a class="btn" href="#">
		Rainbow Bordered Button
	</a>
</div>
            
          
!
            
              // General Staging

body {
	font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
		         Helvetica Neue, Helvetica, Arial, sans-serif;
    font-weight: 300;
	font-size: 112.5%;
	line-height: 1.4;
	background: no-repeat  url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wAARCADwAeADAREAAhEBAxEB/8QAHAABAQADAQEBAQAAAAAAAAAABAMBAgUABwgG/8QAKhAAAgICAgEFAAMBAQEAAwAAAAMBAgRhETEhBRQVQVESE5FioVIycdH/xAAdAQADAQEBAQEBAQAAAAAAAAACAwQBAAUJBggH/8QAIBEBAQEAAwEBAQEBAQEAAAAAAAECAxESExQEYSExQf/aAAwDAQACEQMRAD8A/Ly+f2f9Pxtj+pMwlcTP3P8AoFVZXpW0fc/6BVWV6Vn9n/QKrzSKVmY7n/RdUZXouf2f9AtUZsXouf2f9F2n5q9FTP3P+gXSiaWqiZ+5/wBF+jZpSuPO/wDQLo2bVrjTP7/oF3TZtSMWf2f9Buzfo29pOwfo36Nowp2d9GzkbRhTv/TPq36t64U7/wBMvKy8i1MKd/6LvKXeSEpw7b/0XeRPrcPThzx9k+uRLvZycSY/f9E3aPe4enEnZPraDeoejEmOOxN0i3o9OJOxF0i3TFYk+OxdqPdMViTv/RVqPdLVhzsXaj1S14Uzx2LRbpFMKdmVJur0wp8f/wBB6SaVrgzBnSTVbxgyd0m1029hz+hTtNpn4+fyQ+kumPj/AP8AYUTaYn0+dhyJdNZ9Pmf0ZEmo1n0+djIm1lrPp07GRLrKc+nT+SNiXWU7emzsOJdYTt6bP5I2VLrCdvTJ2NlS6wlb0ufyRkqXXGnPpc/g2VLriSv6VOxkqXXEjb0qePsZKl1xJW9LnY2VLriSt6XOxsqXXDUrelzsbKk1xIM9Mnn7HSot8KF/Tp/JHZQ74R7+nW2Oyg3wj3wJj9H5Q74ajbDmI+x0iXXElbFmP3/R8iXWEbJmP0dMpdZ6Tlcx9yNmE9aTSY6mR0wTWk1mPuf9GzBVrWef2f8ARs4yrXwddTwrH10yUuoqxTkqleRdijJFKci1WaStYqnSlLSKp0pK0iafNErQKtOmiF4/Im0U0QvF89Croc2SvE5+hN2P6LVwuPrkVdi+itcLmOgLtn0Urg6B+jvqpXA5+gbyN+qlfT9A3kZ9VK4EfgN5QXlJXgaF3kJvIYnB0KvIn1yHKwuvAq7Sa5DkYWhV2k3s1OF56F3STWj1YfXgXdI9aMTh6A7SapqcLQKXWjU4WgUm6YrB0Yi3SV4HXg5Lqr0wPrgzpHqrVwdG9JtVSPT9HdJtVvGBo3pNqtvYaN6T6rPx3P0F0m1Xp9N0MkT6az6bz9ByJ9RifTdB9J9RifTe/AyQjWWk+maGRPrLSfS9BxPrDSfS+foOEaw0n0rQyJ9YaT6VoYn1xp29K/5DifXG1n0nn6GSptcSVvSY4/8AxGSptcSNvSNDZU+uJG3pGh0qbXEjb0rQyVLriGb6Vx9D81HvhFZ6Xooyi3wiM9N0Pyi3wit9O4jopyg3whOwePopzHncnF0G3E0U5y87kx0G3G4+inOe3ncmehbp4Kc4Q6iN1cDphPpG9OB+cJ9I3jiR840+q+EKryflLH16haqidQ/JS6CqozS118iqolKVXoRo2FqWI0bKUtQm02UpSxOqbKWtQjVb2UtRPaL0UtQjVb6JooTa30tRPIu1npWqNC7pnpWqNA3TPS1MfkXdBu1q4oPsHshWNx9AXZV2WrG0LuiNbOVjaB9J9bNTjfkA2pdaNRi6AtS60cnF5mBfaXWjk4uju0utHJxdHdpNaNTiaO6S7pq8TxHg7pHqlLxOvBvSbVIph6N6Saq9cPRvlNqrVwtGzKe1vGFoOZT1tGDo3yn03jB0F5T1t7HQXkmvfH6D8k174/QchFjX4/QchNYn07n6CkKsa/HaDmSLlrPp2hkhGstJ9O/5D6JuWs+nf8hSE3LSfTtDJCblrPp2g5E+sos9O78DJCNZQv6fodIm1hG/p/H0NkT6whf0/Q2RNrAjsDQ/MSbwE3A0UZiLeBG4OinMRbwG7B4ifBTmIeTDnPwtFWY8vkw5z8TvwWZy8vkw5z8XvwV5y8vkwC3H0VZy83eRGJ4H5yk1BWr7KM5SagrK8SUZwk2+Dqg/G6j6+QxUE+odC1wI1D4WuvIiw+FqoIpsMVQm0OGKoI0ZKWtZPab2WtZPqu7LWsn1W9lKXyItd2UtQi6d6IooVaz0vRWhVofS1E8/Qu6Z6IWgXdAuiKY4F2XdELxgfRV2WrH5kC6JujU43QPafWjk4/R3abWj04wPpNrRycYztNrRycbRqXVOTi6CiXWjk4oSXVNVihSJdUteKFIl1Sl4kBdJdUleJAXSfVWjD0bIntbxh9eA5CbVK4eg+k+qpGFH4F5I1W0YWjZCa2jB0F5Lrb2PP0F5JrPsNBzJNjE+nx+BzJdjE+nx+ByFWNZ9Pj8DkKsYn0/QXkm5aT6dz9B9FWNPjuPoPoqxpPp+guiblK/p2hshGsj39N0OhGsD39O0NkTawOzA4ifA6RPrAbsCPwfmI94CdgR58FGYk3kF2CUSItYBfg8RPgpzEXJhzMjC45LMR5fJhy8nE0WYjyeXDl5GLxz4LM5eVyYc1+Pxz4K85eXvIDk6Kc5Q7yA5ZRnKDkgDqlOcodvgyoPw2o+vcLVHkm1DoYupPqHwtVeRGodKYupNqGSlqgm0OUxVSfRkpiak9H2YqvJNpvZa68+SfTuzFVJ9O7KXUnrLSlrE6DaRRQm0Ha9FC7WdkrUJtBdErUBaXdEqVyD2TaWpPQFpNpyVeTu0+qclPJqfWjkpOTap6E9eDE+qelIcTa0clAyJtU9KOvAUiTVNUgORNqmKRoOJ9UpeOH0m1Sl4+guk2iKY/P0FInqtcbwHIVVa4vXgLonSlcXQUifSlcXQchVb1xOfoPyVW0YnP0FMlVtGJryFIVWfZ6CkLr3stBzJda+y0MkLsYnC/ICkKsaWwtByF2NLYWgpkqxpOFoZMlWJXw9ByE2I3w9DZCbBW4fEz4GyJ9QVmJ34H5ifWQX4nnofmJNQF2Lx9FOYj1kF2LofmJN5AyMXx0U5iLeXLycXvwV5jzeTLk5ON2V5jzOTDlZON34LMx5PLxuVk43H0WZjy+TDl5KOCrMeXyZcvJXxz4Ksx5nJHMyK8FWY8zkfA1RyfhNR9eoYqPBNqHQxUEuofDFQTahsMXBNoyFqgm1BwxUE2oOGKjkm0PstVSbTuzVQTad2YqCfTuy11J9O7JXURQdlKr0IoOyV1E6B2VRcCqXaSugq0u0tSwOyrTFL5kHsi3s1KjeyNU9Kje02qclUG9p9aPQo2JtU9ChkTap6FQMibVdBCo8DIm1TlK6GSJ9Utag4m1S1KgZE+qWpMeA5E2qRRIchFq1UxwFITavVAfRVq1UR+ByE1SMeOeg5Cq3rjQFIVVIxoC6Lrf20BzJVbRjQH0XXvawHMl1n2sT9BTIK1nEj8GTJdaTix+chzJdaTiQHMlVOcWApkupMxYj6GTJVg98ePwbMk2DNxo/BsyRYI3Fj8HTJGoC/Fjz4H5yl3AH4vJRmJNQB2KUZiTUAfjeJKMxHuOVk48eSvMedyZcjJx48lWY83ky5WTjx5K8R5vJlyMpERyWZjyeXLjZao8leY8jly42VSPJVmPI5Y4+XXsszHj8r4CmOT8FqPrvDFE2odDFQS6h0MVBLqHSmKgl1DOzFQS6g+y19k2h9mKgm1Bdlqj/SbTezFRxwTad2YqOibTuzFx0T6Z2UqOhGgWlKjoRQdlLgRoFpSoE0u0tdRVKtLVXoAnVMVXowm05NTk+qemvQafVOTTo3pPqnpp0bIm1T0VGxPquginQyRNp0E0GRNo5VOhkT6paqDJE+qWqgyRPotVeeBkibRS6aDkJq9KDJCavRYXRNWqvwHIVVqr8DJCbVaq5DkLqlVch9FVSFBTJVZ/p0MmS7W0K0MmS7Xv6dBzJdelPjoOZBalZQ2ZLtaWSHMl2tJV+wHMl1NiYDmC7RWJgbMlUZiY4GTBNFamOJGzJFBeqPI/OU2gHqgdMpNAOVHkozlJpz8hccD8xJtycpUeSrMedtyMpUeSrMedyRyMpZVmPO5I4ubSPJXl5XM4eXTsry8XmjiZkeCvEeNyxxMuOyvMeLyvgCj8LuPrrKYol1DpTFEuodDVQSah0MVBLqDhioJdQcLVBLqGQxcEuoItUeCbUaYqOiaxxioJtOLWTaYWsRYClL+hGoClLgRostUeRNLpi46FWFUtUC+idGKjycTacmIO6T6PRAcT6p6YiOAk+qeiICifR6I6GSJtOgiI8DZE+nQREDIm1TlRAyRNqmKiPAyRPS1RHIyE0tUdDJE+iaQMkIpFIjkOQmrriA5CaRSI4GSE1alY6GSFVWtfIchVq1axyNkKqsUgOZKraKRIyZLtZ/hAyZLtZikTAyZLrE0gZMl2tJXA2ZLtTtSBkyXanNIGTBdqLIjkZMF2isrA2ZJtFZEchzJNorYjyNmeibQXwNmU+q57ogdMpdVz3xA6ZS6rn5ERxI+ZSbscnKiPJRmPO5K4+V9lOY87kcjLjspzHnbrjZlY8lWY8vlcLNrEclWY8blcPMiP8ASzLxeZwcyOyvEeJyvz+o/Eay+uWaYol1D4amCXUOhqiXUOhiiPUMhiSXUHC1wS6g4Ykl1BwxJJqNMV0TaaWuOibUcYsnsZSlx0T2ApS4E6hdKWIsBSlibCqYrwKsKpiugOiaYozoinJOkI0cmQuk+qekKRPo5P0FIn06CPoZIm0eiehkibToIkbE+j1DJE2i1z0HE+i1jIRS1T0MifVKpI2Qir0kOQmkUGSE0hXcDJCqvTsZITVaDpCatUZIVarHQyZKtbVHTJVrI2ZLtbV6GzJdr1hswVa0sMmS7UrQMmS7WlhswXaOwOZKtFZ3IyZKtFZ9jJkm0Vn2NmSbQHjZlNque8bMpdVznyNmUuq5+RPgdMpd1yMmex8y8/krk5U9lGcvN5K4+VPZRmPP3XGy/ESU5jzOWuHmTzyU5jx+WuHmFWXjczhZv2V4eLyvz+qOJPx2o+tuaYqOCTUU5pip6JdQ/JqiXUOlNV9EeoZC1fRJqGQ1MdEmoMtUEuoMxUeYJdQXZioJdRpaYJtRxa+iawNKWI1AUpYiwFKWI1AUtYqwqlrFWE0xQHROjFGdEU1H0b0Ro5JvSfR6foLpPo9E9BSJtHonoZIm0emQ5E+j0SNkTaPVIcifRap6GSJ9FqkORPotU9DYnpVJGSE1dcjITSFyMkItJVPkZITaRSR0heqrWRshFq1ZGyFWqxPgdITazEjpkq1t/KB0hVrMWHSFWvWt4GzJdrS1hsyVala3I2ZKtaWvEDZku1BtoGTBWtCMtAyZJuhG3GTJN0K28cSMmSroB9xkym1pzn37GzKXWnPfeBsyl1pzci/gbMpN6cnKvHkfMvP3px8q/HI+ZedybcjKYPmXncm3Hy7+JKMx5fLpxMu3ZRmPI5dOHmW7Kcx5PLXDzJ8SUZjyOV8BVHR+T1H1qzTFEmoozS1eSXUU5piiTcPlNSSbhkNUSahkpiiPcNhqiXUGUvok1HGK+iXUaYqPMEuoIxcE+oGlLgRqApK4J7AUpcCLC6UoVYXotUC7CKYr6A6JpifozojRqeoN6I0en6N6T01IXSfR6JCkTaPT4DkT6PSMkT6PSMibVPV9ByJtFKkZIn0YoORPotc9DJCKTSRkIpCxshGqRSfAyEVdc9DJCqRSR0I0rSw/MJtVpYbITqqxYdmE2tv5cD8wq16LFEhNraLDpkq1ibDZkq1K1h0yVana/A2ZKtTtcZMlXQ7b9jZkm6EbcbMk60Ky4yZIug2s7GTJN0A9nYyZT60572DZlLrTnPYMmUutOdks8SNmUm9OPlM8SPzl5vJpyMpnY7OXmcmnIymD5l5vJtx8pnY+ZebybcbLuPkeZyacbLt2PzHmclcbL+x0eXyPgSj8vqPrPmmKkk1FOaWqSXUUZpiiXUUZpip6I9Q6Gqnok1DYar6I9wyGJkk1DIYqSTUaWqSXUcYqefBLqChi56JtRlJXPAiwFKXIjWS6SuRFgKWqRVyVSlT0LsI0YqQeiaYqTOiacmTuk+jUyb0n0cmTek+jkyF0m0emwcifR6LDJE2j0W6DkTaNVbxAchGi12GSJ9GKsHIn0Wq3QciekrsNkT6IXfwMkI0vS/gZITSKXHSE2rVuOkItVpfwPkItWrcdITapW4+QjVZ/nyPzCbpn+ZRnJNrP8x+YVaxZg+ZJuk7XgdMlXSV7wNmSLpG7BsyVdDNb2MmSboRrRsyRrQjWjJki6Ea3sbMkXQD29jZlNrTnvb2MmU2tuc9nYyZS625uS3iJGTKTe3Iym9j85eZybcfKb2OmXl8nI4+U3sfMvL5ORyMlvY6ZebvkcnJv2MkQb25OTbnkbIg3pycnzyNiDb4Go/Naj6x5pSvol1FWaYqSTUU5pipJdRRmlpnok1D80xUkmodDVTxwR7hkNTJJqGFqkl1BGKkl1lxipJdQULXPRLqOpa5E6yXSVz0I1kFKXIjWS6UuRNhdKVIFyRoxUgeSKYqTPJFNTJ3SfRqZ6O6T6OTPQXSfVOTPRvSfRybdBdJ9HonoKRNo5FuhkibRy7DJE+il2DifRar9ByJ9FquMkTUml/IyRPV6W8DZCdEUuNkT2r0uNkJq0XH5ifVUqwfmEWrVuPkJtVi/gfnJGq9/MpzlPqvf2D5ki6Z/sKM5KumJYPzkm6aSwdMkXSN2DpknWkLsGzJN0M1vkbMka0G1vfkbMkXQjWDJki6Ea3sbMka0A9ocym1pzntGzKXWnPe0ZMpdac3Jb4GzKTe/+ORlt7HTLyuXTjZTex8y8jl04+UzvyOmXlcm3JyGdjZl52tuZkX7DkSa05mRbsLpLrTmZEhxJqvgivo/Paj6v40Uok1FeKYok1FeaWmfBLqKc0tUkmofmmqkk1D5S1SSbh0NVPBJqGGKnmSXUEWqSbUaaqeSTWWlrkmsdSlSJuQUtciLC6SuehGoClLkV5KpS5AuSKWqQPJFMVIPRFNTJ3SfRqZM6T6OTY3pNo5Mm9J9HJkLpNo1MhSJ9HpsHIl0cu3gORPoldg5E+ilW4GSEaLVcORPomlhkifS9LDpE2l6X6GyEUilxshOqrF/I/MT6UrcpzE+qrW5RnJFqsXH5hFr38/JRmJtV7+wpzE+q9/YPzki6YlhRMk29tLMHTJN0ixg+ZItHuzgdMkXQrWDJkjWg2t/0bMp9aEawbMp9aEa0ZMk3QDmBzKbWnPezgZMpdac97OeRsyk1pzsi/gZMpOTX/HHymdjpHk8unHyr9j5Hk8unGy79jpHk8mnJffsZ083WnPfbnk3ojVc989nJ7XPf0aTXwRZ4Wo+rWaWsk1FeaWol1FmaWok1FeaYok1D5S1SSah8pavol1D5TE2JNQ6GKkl1BQxU9E2o0xU+CXUEWu3RNqOpa5EWF0pciLA0pcibC6UuRXkqlKkCwjRapB8kaLVIPkimpnozym0cmTvKfRyZ6M8p9Gpno3pNo5M9BdJtGpk3pPo5MhdJtGqkKJ9FLsMkT6JXIcifVLXYORPoiluhsifS9LjpE+l6W8DZE+l6XGyJ6rW/kfmEaqtb+SnMT6UrfyU5ieqRcokT6r38yjOU+q9/PwU5ibVe/sKcxNa1lg/OSNaaSzgozki1G7B0yRrQzGD5lPdCtaNmSNaEaz/AEbMp9aDawZMp9aCc3sbMka2C9gcyl1sBzexkyl1oB7Ow5lLrTnZLPA2ZSb1/wAcjKv2NmXlcmnHymdjZl5PLpxsq/Y6ZeRy6ct1xnTzroB1jOi7QXT5M6KtBdPPIJdfA1yeNqPqrmlqkl1FmKUuSXUWYpa7EmorxS12JtZVZLVYk1k+FquSayfDF2JdZPhark2smdGKuS6y0xTCbWRFqYTXLjFMEayGlLYJuS6Stgi4BYWqwryTS13BuSKUu4FyRS1XB8kahibmeU+jlXM8ptQ1LOjvKfUOSzo7ym0aphvlNo5LDvKbUNSwLpPqGKYF0m1ClsD6I1ClsDkTahS2bDkI1F6MGyJ9L1YOkT6i9GDpE+ovVgyRPpSGFGYm1FKtKs5TaVq0pzE+lKs5gozE+mf7CrMS6Y/sKc5TarH9pTnKbVa2aUTKbVTs4omU+qgx3A/OSLRWO7H5yn1RmOGzJGqI1wyZTaobWjJkjVDa3xI2ZT6oTmhzKbVAewORLqgPYHMpdVz8hngZIj3XJyr9jJHlctcjKt2NkeVy1x8q46R5XLXLdbyF0863/obZ5B6DQm9gUuhN+waGvgKpPJ1H1PxS1z0S6izFLVJJqLMUpdvBNYszSV26J9RZmlKsS6ypyWq5LqH5LVbkl1k+FqsT6ybC1XJ9ZGWm5NrLZDFMJdZaYq4jWQ2FUYJuQWErYKuS7DVXFXJFKXcC4Ipari7gmlKuDckaMTcHyn0am5nlNqGqv0d5T6OSzZnlPqGqYd0m0aphvlNqGqZs7pNqGLYF0n0UtgUifRK2bDkT6hS2B9J9QijBkiexejPA6QjUWowdIn1F6sHSJ9RSGFGYm1G8M2VZiXSkN4KcxLpSruIKs5Tae/vKs5S6ay/z2VZyl09LynOU2mlnlMym0lZ+yiZTaQY8fnJFozHeeyiZTaorH9jZhPqisf35GTCfVEY7YyZT6ojW7DmU+qE5oflLqhOaF5S6oLm9hTKbVc97PAcyj3XKyWdjJHl8lcnJZ2MkeVy1yMq4yR5PLXMZbzIyxBaGywqwPYjbeQLGURs+QKCvz8u3k83UfUrGil2JdRdilqv4JdRZilLuS6izFJXYn1FeaUu3kn1FeaUqxNrKnJarkusnZKVbkn1k6FrsIuTIUphNrIzFMJ9Zb0YphPrLCVsE3IKUtgu5LsMUzxAq5I1C1MAuSbCls4+xdyRYWpnQHkjULUzoHyn1DVMM8ptQxTdmeU+oalvRnlPqGqbx9neU2oYp3RvlPqGpbs7ym1DFu2d5T2FLcF5T6hK3BdEahS3BdJ9QijhkhFi637GyEXK1XjsxPrKtMgfmJ9Zb+42VZiXWW0ZBVnKXWW9cjZTnKXUb+48dlWcpdZazk7K85S6jWcrZXnKXUazlbK85S6jW2VspzlLqJXytlOcpdI3yufsfnCbQzMnZRnKfQzMkbMJtDMyOfsOZS6FZkbGTKfQrcjYcym0G1+wplNoNzvBvlJqgud5D8pdUF7vAUyk3XLyXdhTLzORy8loyZeXyuVks55DkeVyOay3mQrEFGZImwNFZPAqsEaBQ/wD1+fVzwedqPqFjRK5J9RfjRS7E2luNErsTai7NKXYn1FeaUu3gn1FWaUqxNqKs0pV/BNrKnNLXcRcmwlduRGsmwpVifWTIWpgjWRFqYI1lxVGbE3ILCVsFXJdhSmi7krULU3YFwRotbehdwRqFqbsC5IsMUzryD5T6himbB8p9QtLQfKbUNU0zyn1C1N68neU+oapuzvKfUMU07yn1DFu2b5T6hK3R+m+U+oSt+zvJFhS3bC8p7F6O2HITYtR+xshOsrVfsdmJ7FKv2UZifUbRkbKcxNqNoyNleYl1G0ZHH2VZiTWW3ufHZVnKXWWlsnZZjKXUaWydlmcpNZaTk7K85SajS2VsrzlLqJWytlOcpNxG+XsomEukL5Wx8yl0MzJ2OmU2h2ZOwplNoZmT2MmUuoMzI5DmUuhG5GwplLqhtyNm+UmqG3I2F5SaCe/ZvlJuuc93gLy83krmZDQunl8jm5DApl5nI57L88m2IL/6Pe4mxgzL9iNQI7J5FVj89rsQ6j6c40QuxPY9DGil2JtRdikrtyT6i/jpK7f+E+oszSF34EaivNKXcn1lVmlUYT3KrNJWzgTcnQlbBOsmwpTRGsmQlbN8CLgwpbhOsuKo4TcBpFHbF3AKUt3Iu4J0Ut3kC4Ipan7AuCNFqf57F3BFhin+QLgjUMU8C4T6hinA+E2oWpwPlPotT9neSLDFPM8p9QxT+vJ3lPqFLyNm+SLCl5HR3kjUJXkbN8kWEqyPPZvkjUIrkBTJNitcnwNkI1FK5HA7OSNRSMnZRmJ9Rn3JVnKXWXvdT+lWcptZbRl7K85S6yz7vZXnKTWWlsvZXjKTWU7Zey3GUm40tmbK8ZSbiVszZXnKTUStmbKs5SaiVszZRMo9RG+VsfMpdRG+Vsb5TaiF8nxPkOZS6g98jYcyl1B2ZOw5lLqCOye/IUyj2G7JC8ot0JuT35C8ot0N2R47N8ot0B7+fs7y8/dAe7ZvTztgOab087cCuwGxFYhewmgsQvbkRpiF5EVlj89Lkir6Y4pC7CdRfx6JXYn1F+KUq3km1F2KSuwjUX4pFLcibFeaRS3kRYqzSV3J7lXKvRgq5OlJowTcnQhbOBVybKUtom5M7JW0VctIo0VcMpFHC7gFJW4XcFaKW7YFyRopbgLgjRancC7gjRan7AuSNGJf0BcJ6Yp2wLhPoxT/AAD4T6LU/ryD5T0peRs7yRS1ZBnkjULXkbO8kWELyNneSbCV5GzvJFhK8nZvknUXpk7CmSbFq5OxsyTY3jJ2OkT6jeMnY/OSNR73OyrOUuo97rZXmJdRj3WyvMTay97rx2V4yl1lpOXsszlHvKU5eyvGUmonOXstxlHqJ2zNleco9xK2XsqzlJqJ2y9lMyj1lK2XsdnKTUStl+OxsiXUQtlbDmUuolbL2HMpdRC+Tz9hzKXUEbkeOwpEPJAm5IXlBsNuQF5efsJuQb5Q7tEa6f07yg2G1oPSHYbWdmdINi3v2DYksRvcn1A9JWsJ0BG9vonoX56XYjsfSnFIpYTpfikrsIsehikrsT6i7FJpYTYuxpelxNivGl6XE3KzFIpcRcqs1etxdyfKvRgq5OlIW3wJuTpSKNF3BnZFGirh3ZC3ci7l3ZFGi7gFpC3AXBdpS3bF3BNpS3AXBGqUpwu4Ipa3bAuSaUp+wbkjRingeE2i1ZHHHkDwRopeQD5I0UvI2Z5Ipaskzyn0VTI2Z5Jq9MnZvkqkUyjvJVIplbO8k2L1ythTJNitMrj7GTJNikZex0yRqN4yvHY/OU+oxOVsqzlNqNZy9lWcptRj3myvGUuoxOZsrzlLqJ2zNlmcpNRK2ZsrxlJuJ2zNlmIj3ErZmyzOUe4nbM2U5iPcSnM2UyI9RO2XsdIl1E5zNjZEmolfL2HIk1Er5ewpEmojfK2HIl1BmZPgLpDuCsydhdINiMeb08/cFY8J5+4Ox3IPSHcFYzwZYg3BW3M6Q7g1meRdiWxO1ifUBU5sT6DYlaSfQX55pJLY+j+NErkRqLsaIXInUehx6JXPAjUX40vRgmxbjS9Li7FmdL0YKuVeNLUYJuVedL0ZAu5PmlqMF3J81F6MF3Js0vRvAq4N9Rajti7h3oijtgXAfS63AXDPRC3cC7gu6KW+ALgm6JW4XcFXRS38AXBN0UvIj9A8EWlLyI47A8E2lryI/QPCfVKXkdeQPBNpS8nYPgjRK8nYPgi0leT15M8EaJplGeCKRTLg3yXV6ZUfp3gq0heVs3wVVq5ezZgq9KVy9jJgqt4zB2ckabRmR+js5T6enMj9Kc5T6jSczZXnKbTWcyP0qzlLqNZzNlWcptROczZXmJNRK2ZsszEmolbM2V5yk1E7ZmyvMR6iVs3ZVmI9xO2ZsfIi1E7ZnEdj5EuonOXz9jJEmonbL8dhyJNxK2ZsORHuJ2y9h9JNRC+VsLpDuIMye/J3SDcHZkGoNwe7+fs3pBuIXdsxBuD3cZ0g3B2NBQ7iEs8gaiSxpLCbUBY0m5NqBsaTcn1AWPz1SxPY+imNL0sJsW40SuwmxdjRFL8ibF+NrVsKsW42rS4u5V42vS4qxZna1birlXnatWAXJ02tRou5Om1qtF3J02tRuwLkz2rVoHl3tergbhntej9gXDPa9HC7gN2RRwNwVdEryBdwTdkryOBdwTdEryNg3BV0SvI4AuCbopeTsC4Juil5PXkHwRdELytg3BV0SvK4+wfBVpC8vZngjVJpl9eTPBNq1Mvz2d4KtXpl+ezfBdq68zZngq1WMvYUwVapXM5+w5gq1t7zY2YK1WYzdjphPqvTm7Kc4T6rWc3ZTnKfTWc3ZVnKXTS2b47Ks5TaTtm8fZTnKbSc5uyrOUmkrZuyvESbTtmbK8xHpK2bsozEm4nbM2PkR6idszY6JdRpOZsZIl1Gk5mwpEmo0nLifsOI9RO2Xx9hRJuI3y9hItxK+Vs55+4jfJ5+wog5IhbI2ag3Eb5GwekG4ld5iDcQu8FBuJS7n7B0ksYluybQOmJaT6gemssJ9QPl+faSIsfQbGyKWgVYsxtelhNi3OyKWFWLsbWrcVcqs8ilbgWK88itbi7lXnkVqzwLuVWeWLVYLuT5yq1YBcnzkVqzkC5NnIrVvAHgz6KVcD5b9FquB8u+itXAeGfRaj/2QfAbyEUyYBuCrtemTAFwVdkUyYj7AuCrsheVH6DeMq7Ipl7A+ZV2SvKBuCbsmmXsDwVdr0zI/QfmVdEUzN8GfMq6IXmR+g/Mq6Xrm7O+ZV0tXNj9M8F3S1c6PHk3wXdLVztneCrpWM+P075l2t4z4/QvBdrPv9jZgnVZ99H6OmCNVrOfsozlPqtZz9lOcp9VrOd57Kc5T6rFs7ZTnPSbVTtnbKcxNpO2dsozEuk7ZuyrMS6StnbKcxJtO2bsfmJNNLZ3jsdIl1E5zdjYl1Gk5uxibUaWzNhJdZazmbDSay0tmbCiTWU7ZezkW8pWy9m9oN4Stl7CefvCdsrn7OefvKVsrZyDeUrZPjsGodxG2UZ0g3Gk5Mc9gVLcve42T6gfL394jUD4Y/vJ7A+XwisibH9550tSwuxXna1Li7lXna1GC7lXnatWC7lTnatWAXKjPIrVgu5U55FKs2L8qs8qtWA3J05VKsA8mzlVo0C4OnMrDQfJ05m8NgHw37N6u2ZcO+qtX7B8O+qtXg+GXlUq8HwC8i1MnYPzLvIvTK2D4Lu16ZOwPBV5FqZWwbgq8hFMzYPzLu16ZmwfmTdr0zDPmC8i9MzZnzKu16ZuzPmXdrVztmfMq7VrnbM+YLtSuds75g9LV9Q89nfMu6U+Q2bOMu6bfIbC+YLpn5Dx2HOMq6Z+Q8djZgjVaz6h47HTBOqxPqGx8wn1WLeobH5wRqtZ9Q2U5ym1U7eoeZ8j5kjVaTn+OyjOU2q0tn7KMxLpO2dsokSaTtnbHZibads7xxyOkTVpOdsZE+o199sNPqNffbNTajE5vH2FE2stJzdhRLvLS2Zs1HvKdszn7ORbynbM2ch3hp7zjnyb28/k4+07Zezu3n740rZWzkG+NK2Vsx5++NpGWZUl420ZX5InUD4ejK2Isd4Z9zsRYzw+MVsJ6f23nalbgWKc7UqwC5UZ5FasF3KnPIpVoNyonKrVoFyfnlUq2ALlRnlVq0C5PnK3q7yD4NnMrV0AXB05lKuBuDZzKQ4HwZOZtDzPDfs2h4PgU5lIeZ4b9m0ZHBnhn2UrlR+mfMN5Va5OwfmG8qtcrYPzLvMpXL4M+YLyrUzNg/Mu8q1cvYPzLvKtXM2Z8y7yK1ztg/MF5FqZuzvmXeRamdH6D8y7tWM/ZnzL+ikeobO+YfalfUdnfMF2pX1DZ3zBdto9Qj/6O+YPbPyOw5xgu2Y9S2HOMu6Z+S4+xk4yrtifUdjJgm6Yn1DY6ZJumvyP1yNmSNaYn1HY6ZI1prPqGx0ifVaTn+Ox8ifVaT6hsdImtaTn9+R8ifTS2fsbE2k5zufsbE9jWc7YcKsa++2GTqMe+2cn1lj32wk+stZzdmp9Zazmc/ZyTeGk5mzkW8NJy9m9o98bScvn7M7R642s5O/B3aPfCnORs7tFvh7aS/Z3aHf89a/3bBtSX+d73GxdoLwPe52LoLwve62BYC8T5XFxPl/Xk23rcC5OztvDAfJs5G9WA3J+eRSGA3Js5W8MgG5OnK3q0DyfOVSrQfJ05lIaD5MnM3huzPBk5lKu2D4NnM3hwPgz7todszwL7Mw/Z3hv2bRkGeG/ZtDzPDvs2jIM8BvM2jJn9M8M+ylcozwG8ykZWwfALzKVytneAXlUrl7B8BvKrXM2Z8yryqRmbM+Yfq3rm8GfNn0VrncfZnzDeRSM/wAdmfMv6Noz+Ps35s+jaM/ZnzDeRvX1HZ3zBdt/kp/TvmC7Y+Rn9C+Yfoz8jP8A9B/MF298jsPwXdvT6j+SFOMq7Yn1HYc4yrtj5HYyYKums+o7HTJF0xPqOxkyTdNZ9R2MmSbWs+obGyEarT3/ADHY7pPWs5/jsOE6azn7DJsYnP2FAWMe92EVYx73ZvZNyx73ZpVy973ZxFw1nN2b2m1hic3ZiXXG193s3tJrjYjM458mJtcb3vNmJ9cbWczZibXC97zZibXC192cmvDGs5mzKVeBicvYPRV4Ws5eweibwvn0XA6f0lNsxczyObbQzgzyZORtDDPI5yN4bwD5MnK2hxnkycraHA+DJzN4eD4NnM2jI2Z4FOdtGRx9neDJ/Q2jJM8Dn9DaMrj7M+Yv0Nvdc/Znzb+ln3WzPm39LMZWzvm39LPvOPs75t/SzGbsz5u/S2jM2Z82fpbRmbO+Yf0s+9n9O+bP0N4zzPmy87eM/wA9mfMH3b+/2d8g/dtHqPH3/wCmfJn3bV9Sj9M+QfupHqWzPkz7tvktnfJn2Z+T2Z8mXmZ+T2d8g/ZtHqmzvkz7M/J7N+TPsx8ps35gvK98ps2cYbys/Jz+hfMF5Xvk9/8AoXzBeRj5P/oOYLvIx8lsLwXdsfJ7D8F3bE+p8/YUyXdMfJbD8lWtfkufsOQusfJbD6Kr3yHjs3oFaz6hsIFjHyOwgWMfIeezQWM/I7O6LuXvkPPZvQLjtj5DZpdw98hs4jXGx8hs7ojXExPqGzk+uF6M7+X2Df8AhN4HpzNmEX+dr73ZxN/ne95s4jX8zE5uzib/ADf4x73ZnRd/m/xiczZ3RV/mY95swu/yv5L+Yfl/sHtn+Znlvt7+wzy36M/2neW/R7+3ZnkX1Z/uO8N+rP8AdMGeG/Zn+8zwL7s+4O8N+70ZJ3hv6GYyePs75t/Qz7rZnzb+h73Ufp3zd+j/AF73fH2d83foZjMj9O+bf0M+7j9M+bv0ve6j9O+bv0s+72d82fpe95s75u/Qz7zZ3zd+h73kfsmfNn6GYzuPs75u/Q29/sz5h+73v4/Tvm79Fe+Q/wCjvm77sx6js75s+7b5Hf8A6Z8nfd75Hf8A6b8mfdn5HZ3yd92Y9S4+zvkz7PfJ/wDRnyd9nvk/+jfk77PfJ7O+Tvq98ns35h+r3yf/AEb8w/V75PZvhn0e+T2b4Z7Y+T/6N8M9sfJR+neWenvktm+QdvR6ls3yy1738foXQXvf7O6Yx8hs3p3T3v8AZ3TOnvkNmh8se/2czyz8hs5nhj3+zmeHvf7OD83vf7OB8mPf7OB8W1fUOPsyxnwe+Q5+zOgX+d73+zegflYnP2d0C/yf497/AGd0C/x/4xOfH6d0z8f+Pe/5+zug/h/x732zugX+D/H/2Q==') center / cover, #909ca2;
	height: 100vh;
}

div {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

// The Effect

.btn {
    background: #113546;
    color: #fff;
    display: inline-block;
    padding: 0.2rem 0.5rem;
    margin: 0.5rem;
    position: relative;
    border-radius: 3px;
	text-decoration: none;
    cursor: pointer;
	box-sizing: border-box;
    transition: all 0.1s ease-in-out;
	
	&:hover {
		background: #021f2c;
		color: #fff;
		
		&:after {
			border-color: #021f2c;
		}
	}
	
	&:after {
		content: '';
		display: inline-block;
		position: absolute;
		left: -0.5rem;
		top: -0.5rem;
		width: calc(100% + (1rem));
		height: calc(100% + (1rem));
		z-index: -1;
		border: 0.375rem solid #113546;
		border-radius: 10px;
		background: linear-gradient(45deg,
			        #ec5f67, #f99157, #fac863, #99c794,
			        #5fb3b3, #6699cc, #c594c5); // Oceanic Next ♡
		box-sizing: inherit;
	}
	
	&:active:after {
		box-shadow: inset 0 0 0.5rem #000;
	}
}
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console