{"id":113,"date":"2022-12-26T18:14:02","date_gmt":"2022-12-26T09:14:02","guid":{"rendered":"https:\/\/phantom-cgray03.xyz\/?p=113"},"modified":"2023-02-07T18:18:40","modified_gmt":"2023-02-07T09:18:40","slug":"post-113","status":"publish","type":"post","link":"https:\/\/phantom-cgray03.xyz\/?p=113","title":{"rendered":"\u3010\u30dc\u30bf\u30f3\u3011\u30d7\u30eb\u30d7\u30eb\u7acb\u4f53\u30dc\u30bf\u30f3"},"content":{"rendered":"<div class=\"purupuruBtn__area\"><a class=\"purupuruBtn\" draggable=\"false\" href=\"\u25cb\u25cb\u25cb\"><span class=\"purupuruText\">\u30c6\u30ad\u30b9\u30c8\u304c\u5165\u308a\u307e\u3059<\/span><\/a><\/div>\n<p>\u4e0b\u8a18Beyond\u30b3\u30fc\u30c9<\/p>\n<p>JS head<\/p>\n<p>\u306a\u3057<\/p>\n<p>HTML<\/p>\n<pre><code>&lt;div class=\"purupuruBtn__area\"&gt;\r\n    &lt;a href=\"\u25cb\u25cb\u25cb\" class=\"purupuruBtn\" draggable=\"false\"&gt;&lt;span class=\"purupuruText\"&gt;\u30c6\u30ad\u30b9\u30c8\u304c\u5165\u308a\u307e\u3059&lt;\/span&gt;&lt;\/a&gt;\r\n&lt;\/div&gt;<\/code><\/pre>\n<p>CSS<\/p>\n<pre><code>.purupuruBtn__area {\r\nwidth: 100%;\r\nheight: auto;\r\nanimation: purupuru 1.5s infinite;\r\n}\r\n\r\n.purupuruBtn {\r\npadding: 0;\r\nmargin: 0 auto;\r\nposition: relative;\r\ndisplay: block;\r\nwidth: 80%;\r\nmax-width: 500px;\r\nheight: 80px;\r\nborder: 1px solid #0b5e29;\r\nborder-radius: 10vw;\r\nbackground: linear-gradient(to bottom, #3acf7a 0%, #006c2b 40%, #006c2b 65%, #3acf7a 100%);\r\nbox-shadow: 0px 0px 4px 2px #9ce7bb inset, 0 3px 0 #0b5e29;\r\ntext-decoration: none;\r\noverflow: hidden;\r\nopacity: 1;\r\ntransition: opacity 0.2s;\r\n}\r\n\r\n@media screen and (max-width:600px) {\r\n .purupuruBtn {\r\n  height: 60px;\r\n}\r\n}\r\n\r\n.purupuruBtn:hover {\r\nopacity: 0.8;\r\n}\r\n\r\n.purupuruBtn::before {\r\ncontent: '';\r\nposition: absolute;\r\nborder-radius: 40%;\r\nwidth: 100%;\r\nheight: 60%;\r\nbackground: linear-gradient(to bottom, rgba(250, 250, 255, 1) 0%, rgba(250, 250, 255, 0.7) 10%, rgba(250, 250, 255, 0) 100%);\r\nz-index: 1;\r\ntop: -10px;\r\nleft: 50%;\r\ntransform: translateX(-50%);\r\n}\r\n\r\n.purupuruBtn .purupuruText {\r\ndisplay: block;\r\ncolor: rgba(255, 255, 255, 0.9);\r\nfont-weight: 700;\r\nfont-size: 30px;\r\ntext-shadow: 0px 0px 2px #13562b;\r\ntext-align: center;\r\nwidth: calc(100% - 50px);\r\nheight: auto;\r\npadding-right: 50px;\r\nline-height: 80px;\r\nz-index: 1;\r\nposition: relative;\r\n}\r\n\r\n@media screen and (max-width:600px) {\r\n .purupuruBtn .purupuruText {\r\n  line-height: 60px;\r\n  font-size: 20px;\r\n}\r\n}\r\n\r\n.purupuruBtn .purupuruText:before {\r\ncontent: '';\r\nwidth: 30px;\r\nheight: 30px !important;\r\nbackground: linear-gradient(to bottom, #006c2b 0%, #3acf7a 80%);\r\ndisplay: block;\r\nposition: absolute;\r\ntop: 50%;\r\nright: 20px;\r\ntransform: translateY(-50%);\r\nborder-radius: 15px;\r\n}\r\n\r\n.purupuruBtn .purupuruText:after {\r\ncontent: '';\r\nwidth: 0;\r\nheight: 0;\r\nborder-style: solid;\r\nborder-width: 6px 0 6px 8px;\r\nborder-color: transparent transparent transparent #ffffff;\r\nposition: absolute;\r\ntop: 50%;\r\nright: 30px;\r\ntransform: translateY(-50%);\r\n}\r\n\r\n@keyframes purupuru {\r\n0% {\r\n  transform: translate(0, 0);\r\n}\r\n\r\n5% {\r\n  transform: translate(0, -5px);\r\n}\r\n\r\n10% {\r\n  transform: translate(0, 5px);\r\n}\r\n\r\n15% {\r\n  transform: translate(0, -5px);\r\n}\r\n\r\n20% {\r\n  transform: translate(0, 5px);\r\n}\r\n\r\n25% {\r\n  transform: translate(0, -5px);\r\n}\r\n\r\n30% {\r\n  transform: translate(0, 0);\r\n}\r\n\r\n100% {\r\n  transform: translate(0, 0);\r\n}\r\n}\r\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>\u30c6\u30ad\u30b9\u30c8\u304c\u5165\u308a\u307e\u3059 \u4e0b\u8a18Beyond\u30b3\u30fc\u30c9 JS head \u306a\u3057 HTML lt;div class=&#8221;purupuruBtn__area&#8221;gt; lt;a href=&#8221;\u25cb\u25cb\u25cb&#8221; class=&#8221;purupuruBt<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[14,8],"tags":[4,7],"class_list":["post-113","post","type-post","status-publish","format-standard","hentry","category-addquicktag","category-8","tag-simplicity02","tag-7"],"_links":{"self":[{"href":"https:\/\/phantom-cgray03.xyz\/index.php?rest_route=\/wp\/v2\/posts\/113","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/phantom-cgray03.xyz\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/phantom-cgray03.xyz\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/phantom-cgray03.xyz\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/phantom-cgray03.xyz\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=113"}],"version-history":[{"count":10,"href":"https:\/\/phantom-cgray03.xyz\/index.php?rest_route=\/wp\/v2\/posts\/113\/revisions"}],"predecessor-version":[{"id":218,"href":"https:\/\/phantom-cgray03.xyz\/index.php?rest_route=\/wp\/v2\/posts\/113\/revisions\/218"}],"wp:attachment":[{"href":"https:\/\/phantom-cgray03.xyz\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=113"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/phantom-cgray03.xyz\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=113"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/phantom-cgray03.xyz\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=113"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}