CSS3 一组互联网Logo按钮

包含twitter、github、stackoverflow、dribbble、instagram、soundcloud的图标的按钮组合。

button,logo

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 2024
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

@charset "UTF-8";
@font-face {
  font-family: 'magic';
  src: url(data:application/x-font-ttf;charset=utf-8;base64,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) format("truetype"), url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAA7wAAsAAAAADqQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABPUy8yAAABCAAAAGAAAABgCCL6HWNtYXAAAAFoAAAAhAAAAISMjIteZ2FzcAAAAewAAAAIAAAACAAAABBnbHlmAAAB9AAACtwAAArc7Y+CeGhlYWQAAAzQAAAANgAAADYBmkQtaGhlYQAADQgAAAAkAAAAJAPiAe5obXR4AAANLAAAADQAAAA0EwAABGxvY2EAAA1gAAAAHAAAABwMUg9ubWF4cAAADXwAAAAgAAAAIAAVAPFuYW1lAAANnAAAATMAAAEzlEAC0HBvc3QAAA7QAAAAIAAAACAAAwAAAAMCAAGQAAUAAAFMAWYAAABHAUwBZgAAAPUAGQCEAAAAAAAAAAAAAAAAAAAAARAAAAAAAAAAAAAAAAAAAAAAQAAA42cB4P/g/+AB4AAgAAAAAQAAAAAAAAAAAAAAIAAAAAAAAgAAAAMAAAAUAAMAAQAAABQABABwAAAAGAAQAAMACAABACDhjOJD4ljjL+NB40zjXeNn//3//wAAAAAAIOGM4kPiWOMu40HjTONd42f//f//AAH/4x54HcIdrhzZHMgcvhyuHKUAAwABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAABwAAAAACAAHgACoARwBdAHoAhACLAJIAAAEiBgcOARUcARUeARceARceARceATMyNjc+ATc+ATc+ATc8ATU0JicuASMHFAYHDgErASImJy4BPQE0Njc+ATsBMhYXHgEdARcjIiY/AT4BNz4BMzIWFx4BHwEWBiM3FAYHDgErASImJy4BPQE0Njc+ATsBMhYXHgEdAQcVMzUOASMiJicXNzUOAQcVJxc1LgEnFQEANV0jIygpMQ0OCgEIIxQUJQgIJRQUIwgBCg4NMSkoIyNdNTAHBgUQCRoJEAUGBwcGBRAJGgkQBQYHRCgICQIKAQUDBAgEBAgEAwUBCgIJCIwHBgUQCRoJEAUGBwcGBRAJGgkQBQYHwEAKEQUFEQpgQAgkFMBAFCQIAeAmICFXMgIEAgkMCwwqKQIEAgIDAwICBAIpKgwLDAkCBAIyVyEgJrUJEAUGBwcGBRAJCgkQBQYHBwYFEAkKkwsIKgQHAgMDAwMCBwQqCAuTCRAFBgcHBgUQCQoJEAUGBwcGBRAJCvY1NQEBAQE1DTMCBAI4DQ04AgQCMwAABAAE/+AB/AHgAAMAIAA5AEkAAAEDIQM1MTIWFx4BFxMeAQcOASMhIiYnJjY3Ez4BNz4BMwM0Njc+ATMyFhceARUUBgcOASMiJicuATU3MhYXHgEVByMnNDY3PgEzAQCsAVisBAgEBAcD2wYCBQQSDf5ODRIEBQIG2wMHBAQIBCAFBAULBwcLBQQFBQQFCwcHCwUEBSAHCwUEBQosCgUEBQsHAZH+jwFxTwMDAgkF/kwLFAcHCQkHBxQLAbQFCQIDA/6ABwsFBAUFBAULBwcLBQQFBQQFCwfABQQFCwdgYAcLBQQFAAAAAAEAAAAQAgABoAAFAAABBycHFwEBsPBwUMABQAGg8HBQwAFAAAQAAP/gAgAB4AAcADAAVABlAAABISIGBw4BFREUFhceATMhMjY3PgE1ETQmJy4BIwUzHgEVFAYHDgEjIiYnLgE1NDY3IRUUBgcOASMhIiYnLgE9ATMOARUUFhceATMyNjc+ATU0JiczNRQGKwEiJj0BNDY7ATIWHQEBq/6qEh4MDA0NDAweEgFWEh4MDA0NDAweEv75uAMCEA0NJBQUJA0NDwIDARwFBAULB/7ABwsFBAUyAgEWFBQ1Hh41FBQWAgIyCQcgBwkJByAHCQHgDQwMHhL+qhIeDAwNDQwMHhIBVhIeDAwN4AgQCBQkDQ0PDw0NJBQIEAjABwsFBAUFBAULB8AIEAgeNRQUFhYUFDUeCBAIcAcJCQcgBwkJByAAAAEAAAAQAgABsABsAAABDgEHDgEHPgE3PgE3DgEHDgEHLgEnLgEjIgYHDgEVFBYXLgEnLgEnDgEHDgEVFBYXHgEXIiYnLgEnFDAVFBYXHgEXDgEjIiYnHgEXHgEzDgEHDgEjKgEnHgEXHgEzMjY3PgE1PAE1PgE3PgE3AgAHDwcIDwgIDgYGCQMIEAgIEgkHEQoKFQwVJw4OEQIBIT0bHDATBAUCAgIHBgYSCgYNBgYLBQwMCx8SBw4HBQoFBRMNDR8SDh4RECMTBg0GESYVFCsWSHAmJicHDwYHDAUBfwMGAgIDAQUNBwcRCQQIAwMFAggMBAQFEA8OJhYGDAYCEQ4OJxgGDQYHDgcOGQsMEgcCAQIFAwEBEyIODRMEAQIBARAbCQoLCxEFBgYBCxIGBgY2KytrNAMHAwYMBwcPCAAABwAA/+ACAAHgABgAKABBAFoAZwB6AJAAAAUiJicuATU0Njc+ATMyFhceARUUBgcOASM3LgEHHgEXHgEXPgE3PgE3By4BJy4BJyIwIw4BBx4BFx4BMzI2Nz4BNyc+ATcyNjMuAScuAScOASMcARUUFhceARcnMjY3LgEnDgEHDgEHNx4BFz4BNy4BJy4BIyoBBw4BBxcOAQceARceARceARc2FhcuAScuAScBADVdIyMoKCMjXTU1XSMjKCgjI1012AZPMwoQBQUFARMfDAwQBIMBBgYFEQsBAVxMAw4fEREkEwsXCgsVCfcDWlQCBQICBAMCBANShwgIBwgUDjQHdk0bMgQXJxAQFgWjBDIbOzUDDyESEycVBw0GBg0G3AM6PQIEAgEEAgECATdcBgEGBwYSDCAoIyNdNTVdIyMoKCMjXTU1XSMjKN0CEAkdNRQVHAUNIBITKhenCB8WFTYeIWIGCxEGBgYCAgMGBDcHbhwCBQkFBQkEGAcBBAEVKBMSIg+/BxQwSQYLIBMULhqoBkgyFjUEDRUHBwcBAQICSgU5GAQIBAQIBAMFAwcNARMlEREgDgAAAAACAAD/4AIAAeAAGADuAAABIgYHDgEVFBYXHgEzMjY3PgE1NCYnLgEjEw4BBw4BBw4BBzU0JicuASc+ATcyNjc+ATc+ATc+ATc+ATc0NjU2NDU0JicuASc+ATU0Ji8BBiIHJgYjDgEHJiInBiYHJgYjDgEHLgEnLgEjLgEnBiYHJgYxDgEHFBYXDgEHDgEVFBYVFBYXHgEXHgEXHgEXHgEXHgEXHgEzDgEHDgEdAS4BJy4BJy4BJy4BJy4BJy4BJy4BNTQ2Nz4BNz4BNz4BNz4BNz4BNz4BNz4BMzIWFx4BFx4BFx4BFx4BFx4BFx4BFx4BFRQGBw4BBw4BBw4BBwEANV0jIygoIyNdNTVdIyMoKCMjXTWYBxAJCRIJBQoFAwIDCAUHDAUFDAYGCwUFCQQFBwMDBQICAQMDAwoGAwIEBAYDDAgECQUFCgUIDwcIEAgIEAcIDwcHDQYFCgQDBwMDBAEBAQQDAQIDBgkEAwMBAgEBBQMDCAQECgQFCwYGDAUGDAYFCAIDAgYLBgkSCQkQBwcOBQYKBAQHAgICAgICBwQECgYFDgcHEAkJEgkKFQoLFQsLFQsKFQoJEgkJEAcHDgUGCgQEBwICAgICAgcEBAoGBQ4HAeAoIyNdNTVdIyMoKCMjXTU1XSMjKP5oBw4FBgoEAgQBJggNBQYJAwEBAgQBBAMFAQkDBwgIBBAHBgcGAwsDDBAKBhEFCg0LBhMGAwIGAQcFAwcFBAIEAgEDAgIDBgYEAgUCAQEBAQEBAQkRCQgPCAcPCAgSCgUJBQQJBAkOBgYKBQUHAwMFAgMDAQECBAkGBQ0IJwIEAgQKBgUOBwcQCQkSCQoVCgsVCwsVCwoVCgkSCQkQBwcOBQYKBAQHAgICAgICBwQECgYFDgcHEAkJEgkKFQoLFQsLFQsKFQoJEgkJEAcAAAAABQAAAGACAAFAACUAKwAxADcAPQAAJSIGBy4BJy4BIyIGBw4BBw4BHQEUFjMwMjMyNjc+ATU0JicuASMHMzcnIwcHIyc3MxcHMzcnIwcHMzcnIwcBvgcNBgITEA8pFwULBQYKBQMDBAO2AQ4YCQkKCgkJGA72EAgIEAgoEAgIEAhYEAgIEAg4EAgIEAjfAwIVJg0OEAEBAQMCAQMDyQMFCgkIFw0OFwgJCn9wcHBwUU9QUEBAQCAgICAAAAAFAAD/4AIAAeAABwALAA8AEwAYAAAlFSE1MxUhNQUhFSE/AQUHJTcFBzcHJzczAgD+AEABgP6gAUD+wAgNATkO/uwbASIbQif+HB2gwMCAgCBAhT9FP8Y6iDptM8MlAAABAAAAAQAAx2sHzF8PPPUACwIAAAAAANA9gbgAAAAA0D2BuAAA/+ACAAHgAAAACAACAAAAAAAAAAEAAAHg/+AAAAIAAAAAAAIAAAEAAAAAAAAAAAAAAAAAAAANAAAAAAAAAAAAAAAAAQAAAAIAAAACAAAEAgAAAAIAAAACAAAAAgAAAAIAAAACAAAAAgAAAAAAAAAACgAUAB4A8AFkAXYCBgKmA4IE4AU+BW4AAQAAAA0A7wAHAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAA4ArgABAAAAAAABAAoAAAABAAAAAAACAA4AOQABAAAAAAADAAoAIAABAAAAAAAEAAoARwABAAAAAAAFABYACgABAAAAAAAGAAUAKgABAAAAAAAKADQAUQADAAEECQABAAoAAAADAAEECQACAA4AOQADAAEECQADAAoAIAADAAEECQAEAAoARwADAAEECQAFABYACgADAAEECQAGAAoALwADAAEECQAKADQAUQBtAGEAZwBpAGMAVgBlAHIAcwBpAG8AbgAgADEALgAwAG0AYQBnAGkAY21hZ2ljAG0AYQBnAGkAYwBSAGUAZwB1AGwAYQByAG0AYQBnAGkAYwBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIABiAHkAIABJAGMAbwBNAG8AbwBuAC4AAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=) format("woff");
  font-weight: normal;
  font-style: normal; }

.btn {
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  display: inline-block;
  font: inherit;
  padding: 0;
  text-decoration: none;
  text-shadow: none; }

[data-icon='skull']:before, [data-icon='warning']:before, [data-icon='checkmark']:before, [data-icon='instagram']:before, [data-icon='twitter']:before, [data-icon='dribbble']:before, [data-icon='github']:before, [data-icon='soundcloud']:before, [data-icon='stackoverflow']:before, [data-icon='danger']:before, [data-icon='escher']:before, [data-icon='godel']:before, [data-icon='bach']:before, [data-icon='kevin bacon']:before, .btn--alert:before, .btn--twitter:before, .btn--instagram:before, .btn--stackoverflow:before, .btn--soundcloud:before, .btn--dribbble:before, .btn--github:before {
  font-family: 'magic';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  /* Better Font Rendering =========== */
  text-decoration: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

body {
  background: #eee;
  color: #333;
  font-family: sans-serif;
  font-size: 18px;
  line-height: 23px;
  margin: 23px auto;
  max-width: 40rem;
  text-align: center; }

body .btn--call-to-action, body .form, body .social {
  margin-bottom: 23px; }

[data-icon='skull']:before {
  content: "";
  margin-right: 0.4em; }

[data-icon='warning']:before {
  content: "";
  margin-right: 0.4em; }

[data-icon='checkmark']:before {
  content: "";
  margin-right: 0.4em; }

[data-icon='instagram']:before {
  content: "";
  margin-right: 0.4em; }

[data-icon='twitter']:before {
  content: "";
  margin-right: 0.4em; }

[data-icon='dribbble']:before {
  content: "";
  margin-right: 0.4em; }

[data-icon='github']:before {
  content: "";
  margin-right: 0.4em; }

[data-icon='soundcloud']:before {
  content: "";
  margin-right: 0.4em; }

[data-icon='stackoverflow']:before {
  content: "";
  margin-right: 0.4em; }

[data-icon='danger']:before {
  content: "";
  margin-right: 0.4em; }

[data-icon='escher']:before {
  content: "";
  margin-right: 0.4em; }

[data-icon='godel']:before {
  content: "";
  margin-right: 0.4em; }

[data-icon='bach']:before {
  content: "";
  margin-right: 0.4em; }

[data-icon='kevin bacon']:before {
  content: "";
  margin-right: 0.4em; }

.btn--submit {
  font-size: 18px;
  padding: 0.25em 1em;
  display: inline-block;
  border-radius: 0.25em;
  background: linear-gradient(to top, #09c, #1ac6ff) #1ac6ff;
  border: 1px solid #007399;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
  color: #333;
  text-shadow: 0 1px 0 rgba(238, 238, 238, 0.5); }

.btn--call-to-action {
  font-size: 28px;
  padding: 1em;
  display: block;
  border-radius: 0;
  background: linear-gradient(to top, #09c, #1ac6ff) #1ac6ff;
  border: 1px solid #007399;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
  color: #333;
  text-shadow: 0 1px 0 rgba(238, 238, 238, 0.5); }

.btn--secondary {
  font-size: 12px;
  padding: 0 1em;
  display: inline-block;
  border-radius: 0.25em;
  border: 2px solid #333;
  color: #333; }

.btn--alert {
  font-size: 18px;
  padding: 0.25em 1em;
  display: inline-block;
  border-radius: 0.25em;
  background: linear-gradient(to top, #09c, #1ac6ff) #1ac6ff;
  border: 1px solid #007399;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
  color: #333;
  text-shadow: 0 1px 0 rgba(238, 238, 238, 0.5); }

.btn--alert:before {
  content: "";
  margin-right: 0.4em; }

.btn--social {
  font-size: 18px;
  padding: 0.25em 1em;
  display: inline-block;
  border-radius: 50em;
  background: #1ac6ff;
  color: #333; }

.btn--twitter {
  font-size: 18px;
  padding: 0.25em 1em;
  display: inline-block;
  border-radius: 50em;
  background: #00aced;
  color: #eee;
  margin-bottom: 23px; }

.btn--twitter:before {
  content: "";
  margin-right: 0.4em; }

.btn--instagram {
  font-size: 18px;
  padding: 0.25em 1em;
  display: inline-block;
  border-radius: 50em;
  background: #517fa4;
  color: #eee;
  margin-bottom: 23px; }

.btn--instagram:before {
  content: "";
  margin-right: 0.4em; }

.btn--stackoverflow {
  font-size: 18px;
  padding: 0.25em 1em;
  display: inline-block;
  border-radius: 50em;
  background: #f47920;
  color: #333;
  margin-bottom: 23px; }

.btn--stackoverflow:before {
  content: "";
  margin-right: 0.4em; }

.btn--soundcloud {
  font-size: 18px;
  padding: 0.25em 1em;
  display: inline-block;
  border-radius: 50em;
  background: #f60;
  color: #eee;
  margin-bottom: 23px; }

.btn--soundcloud:before {
  content: "";
  margin-right: 0.4em; }

.btn--dribbble {
  font-size: 18px;
  padding: 0.25em 1em;
  display: inline-block;
  border-radius: 50em;
  background: #ea4c89;
  color: #eee;
  margin-bottom: 23px; }

.btn--dribbble:before {
  content: "";
  margin-right: 0.4em; }

.btn--github {
  font-size: 18px;
  padding: 0.25em 1em;
  display: inline-block;
  border-radius: 50em;
  background: #4183c4;
  color: #eee;
  margin-bottom: 23px; }

.btn--github:before {
  content: "";
  margin-right: 0.4em; }

HTML

包含twitter、github、stackoverflow、dribbble、instagram、soundcloud的图标的按钮组合。

button,logo

编辑器支持Emmet

快捷键

包含twitter、github、stackoverflow、dribbble、instagram、soundcloud的图标的按钮组合。

button,logo

HTML5 CSS3一组文本对齐方式按钮（带切换动画）

HTML5 CSS3一组很棒的带晃动动画特效的单选按钮

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：