{"id":1518,"date":"2026-02-17T10:58:39","date_gmt":"2026-02-17T10:58:39","guid":{"rendered":"https:\/\/mytribu.fr\/cmopc\/?p=1518"},"modified":"2026-02-17T11:51:36","modified_gmt":"2026-02-17T11:51:36","slug":"code-pen-partage-de-code-css","status":"publish","type":"post","link":"http:\/\/mytribu.fr\/cmopc\/code-pen-partage-de-code-css\/","title":{"rendered":"code pen : Partage de code css"},"content":{"rendered":"\n

Source sur codepen : 100 days css Button N\u00b0 045<\/a><\/p>\n\n\n\n

Code HTML<\/p>\n\n\n\n

<!doctype html>\n<html>\n<head>\n<meta charset=\"utf-8\">\n<title>Document sans nom<\/title>\n<\/head>\n\n<body>\n\t<div class=\"container\">\n    <div class=\"center\">\n      <button class=\"btn\">\n        <svg width=\"180px\" height=\"60px\" viewBox=\"0 0 180 60\" class=\"border\">\n          <polyline points=\"179,1 179,59 1,59 1,1 179,1\" class=\"bg-line\" \/>\n          <polyline points=\"179,1 179,59 1,59 1,1 179,1\" class=\"hl-line\" \/>\n        <\/svg>\n        <span>HOVER ME<\/span>\n      <\/button>\n    <\/div>\n  <\/div>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n
code CSS<\/strong><\/p>\n\n\n\n
@import url('https:\/\/fonts.googleapis.com\/css?family=Lato:100&display=swap');\n\nbody, html {\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  padding: 0;\n  background: #5CA4EA;\n  overflow: hidden;\n  font-family: 'Lato', sans-serif;\n}\n\n.container {\n  width: 400px;\n  height: 400px;\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.center {\n  width: 180px;\n  height: 60px;\n  position: absolute;\n}\n\n.btn {\n  width: 180px;\n  height: 60px;\n  cursor: pointer;\n  background: transparent;\n  border: 1px solid #91C9FF;\n  outline: none;\n  transition: 1s ease-in-out;\n}\n\nsvg {\n  position: absolute;\n  left: 0;\n  top: 0;\n  fill: none;\n  stroke: #fff;\n  stroke-dasharray: 150 480;\n  stroke-dashoffset: 150;\n  transition: 1s ease-in-out;\n}\n\n.btn:hover {\n  transition: 1s ease-in-out;\n  background: #4F95DA;\n}\n\n.btn:hover svg {\n  stroke-dashoffset: -480;\n}\n\n.btn span {\n  color: white;\n  font-size: 18px;\n  font-weight: 100;\n}\n<\/code><\/pre>\n\n\n\n
Quelques boutons sympas :<\/p>\n\n\n\n
Button hover effects with box-shadow<\/a><\/p>\n\n\n\n
100 days css Button N\u00b0 045<\/a><\/p>\n\n\n\n
Bubbly Button<\/a><\/p>\n\n\n\n
Multilayer text<\/a><\/p>\n\n\n\n
<\/p>\n\n\n\n
Fond en CSS en mouvement<\/p>\n\n\n\n
🌈 Pure CSS Animated Gradient Background<\/a><\/p>\n\n\n\n
un texte qui se plie<\/strong><\/p>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n
<!doctype html>\n<html>\n<head>\n<meta charset=\"utf-8\">\n<title>Document sans nom<\/title>\n<style type=\"text\/css\">\n\t@property --_s {\n  syntax: \"<number>\";\n  initial-value: 0;\n  inherits: true;\n}\nul li a {\n  --h: .12em; \/* control the elastic effect *\/\n  \n  display: flex;\n  gap: .15ch;\n  font: bold 40px monospace;\n  transition: --_s 1.5s var(--easing);\n}\nul li:hover a,\nul li:has(a:hover) a {\n  --_s: -1;\n  transition: --_s .3s;\n}\nul li:has(a:hover) a {\n  --_s: 1;\n}\nul li a span {\n  offset: shape(from .5ch, curve to calc(100% - .5ch) 50%\n            with 30% calc(50% - var(--_s)*sibling-count()*var(--h))\/\n                 70% calc(50% - var(--_s)*sibling-count()*var(--h))\n    ) calc(99.9%*(sibling-index() - 1)\/(sibling-count() - 1));\n  pointer-events: none;\n}\nul li {\n  position: relative;\n}\nul li:after {\n  content: \"\";\n  position: absolute;\n  inset: 0 0 50%;\n  cursor: pointer;\n}\nul li:has(a:hover):after {\n  inset: 0 0 100%;\n}\nul li:hover:after {\n  inset: 0;\n}\n\nbody {\n  margin: 0;\n  height: 100vh;\n  display: grid;\n  place-content: center;\n  background: #003049;\n  \/* from https:\/\/linear-easing-generator.netlify.app\/ *\/\n  --easing: linear(\n    0, 1.42406 3.67%, 1.65745 4.64%, 1.71709 5.111%, 1.74059 5.591%,\n    1.73313 5.971%, 1.70302 6.361%, 1.57154 7.201%, 0.68765 10.781%,\n    0.57364 11.621%, 0.53175 12.451%, 0.53598 12.831%, 0.55521 13.231%,\n    0.63817 14.071%, 1.19719 17.652%, 1.26945 18.492%, 1.2961 19.322%,\n    1.2935 19.702%, 1.28141 20.102%, 1.22906 20.942%, 0.87551 24.522%,\n    0.82972 25.363%, 0.81279 26.183%, 0.81425 26.563%, 0.8217 26.963%,\n    0.85499 27.813%, 1.07903 31.403%, 1.10761 32.233%, 1.11838 33.053%,\n    1.1128 33.833%, 1.0918 34.683%, 0.9501 38.274%, 0.93199 39.104%,\n    0.92516 39.914%, 0.92863 40.704%, 0.94188 41.554%, 1.0315 45.145%,\n    1.04288 45.965%, 1.04731 46.775%, 1.04586 47.455%, 1.03969 48.185%,\n    0.98337 51.745%, 0.97376 52.705%, 0.97009 53.635%, 0.97488 55.056%,\n    1.01049 58.616%, 1.0189 60.486%, 1.0159 61.926%, 0.99343 65.477%,\n    0.98806 67.337%, 0.98996 68.807%, 1.00408 72.327%, 1.00753 74.157%,\n    0.99524 81.008%, 1.00297 87.699%, 0.99812 94.579%, 1.00074\n  );\n}\nul {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0 4em;\n  list-style: none;\n  color: #fdf0d5;\n  padding: 0;\n  margin: 0;\n}\nul li:not(:last-child) {\n  border-image: conic-gradient(currentColor 0 0) 0 1 0 0\/calc(50% - 2px) 1em\/2.5em;\n}\nul li a {\n  text-decoration: none;\n  text-transform: uppercase;\n  color: inherit;\n  padding-block: .2em;\n}\n<\/style>\n<\/head>\n\n<body>\n\t<ul>\n  <li>\n    <a href=\"#\"><span>A<\/span><span>b<\/span><span>o<\/span><span>u<\/span><span>t<\/span><\/a>\n  <\/li>\n  <li>\n    <a href=\"#\"><span>P<\/span><span>o<\/span><span>r<\/span><span>t<\/span><span>f<\/span><span>o<\/span><span>l<\/span><span>i<\/span><span>o<\/span><\/a>\n  <\/li>\n  <li>\n    <a href=\"#\"><span>C<\/span><span>o<\/span><span>n<\/span><span>t<\/span><span>a<\/span><span>c<\/span><span>t<\/span><\/a>\n  <\/li>\n<\/ul>\n<\/body>\n<\/html>\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
Source sur codepen : 100 days css Button N\u00b0 045 Code HTML code CSS Quelques boutons sympas : Button hover<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1518","post","type-post","status-publish","format-standard","hentry","category-non-classe","comments-off"],"_links":{"self":[{"href":"http:\/\/mytribu.fr\/cmopc\/wp-json\/wp\/v2\/posts\/1518","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/mytribu.fr\/cmopc\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/mytribu.fr\/cmopc\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/mytribu.fr\/cmopc\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/mytribu.fr\/cmopc\/wp-json\/wp\/v2\/comments?post=1518"}],"version-history":[{"count":7,"href":"http:\/\/mytribu.fr\/cmopc\/wp-json\/wp\/v2\/posts\/1518\/revisions"}],"predecessor-version":[{"id":1527,"href":"http:\/\/mytribu.fr\/cmopc\/wp-json\/wp\/v2\/posts\/1518\/revisions\/1527"}],"wp:attachment":[{"href":"http:\/\/mytribu.fr\/cmopc\/wp-json\/wp\/v2\/media?parent=1518"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/mytribu.fr\/cmopc\/wp-json\/wp\/v2\/categories?post=1518"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/mytribu.fr\/cmopc\/wp-json\/wp\/v2\/tags?post=1518"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}