{"id":11384,"date":"2024-03-21T16:12:11","date_gmt":"2024-03-21T11:12:11","guid":{"rendered":"https:\/\/codehim.com\/?p=11384"},"modified":"2024-03-21T16:12:11","modified_gmt":"2024-03-21T11:12:11","slug":"animated-send-mail-button-in-html-css","status":"publish","type":"post","link":"https:\/\/codehim.com\/html5-css3\/animated-send-mail-button-in-html-css\/","title":{"rendered":"Animated Send Mail Button in HTML CSS"},"content":{"rendered":"

This code creates an animated send mail button using HTML and CSS. The button has an envelope icon. It has smooth hover and focus effects. The animation transitions smoothly. It provides an attractive user interface for sending emails.<\/p>\n

How to Create Animated Send Mail Button in HTML CSS<\/h2>\n

1. First of all, load the Normalize CSS<\/a> by adding the following CDN link into the head tag of your webpage.<\/p>\n

<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/normalize\/5.0.0\/normalize.min.css\"><\/pre>\n
2. Create the HTML structure for your button. You’ll need a <button><\/code> element to contain the button content, including the envelope icon and text.<\/p>\n
<button>\r\n  <span class=\"backdrop\">\r\n    <span class=\"action\"><\/span>\r\n  <\/span>\r\n  <span class=\"text\">\r\n    Send Mail\r\n  <\/span>\r\n  <span class=\"icon\">\r\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\">\r\n      <!-- Tray -->\r\n      <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M2.25 13.5h3.86a2.25 2.25 0 012.012 1.244l.256.512a2.25 2.25 0 002.013 1.244h3.218a2.25 2.25 0 002.013-1.244l.256-.512a2.25 2.25 0 012.013-1.244h3.859m-19.5.338V18a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18v-4.162c0-.224-.034-.447-.1-.661L19.24 5.338a2.25 2.25 0 00-2.15-1.588H6.911a2.25 2.25 0 00-2.15 1.588L2.35 13.177a2.25 2.25 0 00-.1.661z\" \/>\r\n      <!-- Envelope -->\r\n      <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75\" \/>\r\n    <\/svg>\r\n  <\/span>\r\n<\/button><\/pre>\n
3. Now, let’s add CSS styles to make our button visually appealing and animated. We’ll define styles for the button, text, icon, and animation transitions. We’ll use CSS transitions to create smooth effects when hovering or focusing on the button:<\/p>\n
@font-face {\r\n  font-family: \"Geist Sans\";\r\n  src: url(\"https:\/\/assets.codepen.io\/605876\/GeistVF.ttf\") format(\"truetype\");\r\n}\r\n\r\n* {\r\n  box-sizing: border-box;\r\n}\r\n\r\n:root {\r\n  --speed: 0.25s;\r\n}\r\n\r\nbody {\r\n  display: grid;\r\n  place-items: center;\r\n  min-height: 100vh;\r\n  background: hsl(0 0% 4%);\r\n  font-family: \"Geist Sans\", sans-serif;\r\n}\r\n\r\nbutton {\r\n  cursor: pointer;\r\n  position: relative;\r\n  display: flex;\r\n  border: 1px solid hsl(0 0% 100% \/ 0.25);\r\n  border-radius: 100px;\r\n  overflow: hidden;\r\n  display: grid;\r\n  grid-template-columns: auto 3.5em;\r\n  gap: 1.5em;\r\n  font-family: \"Geist Sans\", sans-serif;\r\n  font-weight: 80;\r\n  background:\r\n    hsl(280 0% 12%);\r\n  color: hsl(0 0% 90%);\r\n  padding: 0.5em 0.5em 0.5em 1.5em;\r\n  place-items: center;\r\n  box-shadow:\r\n    0 1px inset hsl(0 0% 100% \/ 0.5),\r\n    0 -10px 20px 10px hsl(0 0% 0% \/ 0.5) inset,\r\n    0 10px 20px 10px hsl(0 0% 50% \/ 0.25) inset,\r\n    0 1px hsl(0 0% 2% \/ 0.75);\r\n  letter-spacing: 0.05ch;\r\n}\r\n\r\nbutton:focus-visible {\r\n  outline-offset: 0.5em;\r\n  outline-color: hsl(280 80% 80% \/ 0.5);\r\n}\r\n\r\n.icon {\r\n  width: 100%;\r\n  aspect-ratio: 1;\r\n  border-radius: 100%;\r\n}\r\n\r\n.backdrop {\r\n  position: absolute;\r\n  inset: 0.5em;\r\n}\r\n\r\n.icon {\r\n  overflow: hidden;\r\n}\r\n\r\n.icon svg {\r\n  width: 50%;\r\n  overflow: visible !important;\r\n}\r\n\r\nsvg path:nth-of-type(2) {\r\n  transform-box: fill-box;\r\n  transform-origin: 50% 50%;\r\n  transition:\r\n    fill var(--speed),\r\n    rotate var(--speed),\r\n    scale var(--speed),\r\n    translate var(--speed);\r\n}\r\n\r\nsvg path:nth-of-type(1) {\r\n  translate: 5rem 0;\r\n  transform-box: fill-box;\r\n  transition: translate var(--speed);\r\n  opacity: 0.75;\r\n}\r\n\r\nbutton:is(:hover, :focus-visible) svg path:nth-of-type(2) {\r\n  translate: 0 -50%;\r\n  rotate: 290deg;\r\n  scale: 0.65;\r\n  fill: hsl(0 0% 20%);\r\n  transition-timing-function: ease, ease, cubic-bezier(.2, .7, .9, 1.5);\r\n}\r\n\r\nbutton:is(:hover, :focus-visible) svg path:nth-of-type(1) {\r\n  translate: 0 0;\r\n}\r\n\r\n.action {\r\n  position: absolute;\r\n  right: 0;\r\n  height: 100%;\r\n  background:\r\n    linear-gradient(transparent 50%, hsl(0 0% 30% \/ 0.5)),\r\n    hsl(0 0% 0%);\r\n  box-shadow: 0 -1px inset hsl(0 0% 100% \/ 0.35);\r\n  width: 3.5em;\r\n  aspect-ratio: 1;\r\n  transition: width var(--speed);\r\n  border-radius: 100px;\r\n}\r\n\r\n.icon {\r\n  color: hsl(0 0% 90%);\r\n  display: grid;\r\n  place-items: center;\r\n  z-index: 2;\r\n}\r\n\r\n.text {\r\n  display: inline-block;\r\n  z-index: 2;\r\n  padding: 0 2rem;\r\n}\r\n\r\nbutton:is(:hover, :focus-visible) .action {\r\n  width: 100%;\r\n}<\/pre>\n
That’s all! hopefully, you have successfully created the Animated Send Mail Button. If you have any questions or suggestions, feel free to comment below.<\/p>\n","protected":false},"excerpt":{"rendered":"
This code creates an animated send mail button using HTML and CSS. The button has an envelope icon. It has…<\/p>\n","protected":false},"author":1,"featured_media":11398,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[63],"tags":[],"class_list":["post-11384","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html5-css3"],"acf":[],"yoast_head":"\nAnimated Send Mail Button in HTML CSS — CodeHim<\/title>\n<meta name=\"description\" content=\"Here is a free code snippet to create a Animated Send Mail Button in HTML CSS. You can view demo and download the source code.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codehim.com\/html5-css3\/animated-send-mail-button-in-html-css\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Animated Send Mail Button in HTML CSS — CodeHim\" \/>\n<meta property=\"og:description\" content=\"Here is a free code snippet to create a Animated Send Mail Button in HTML CSS. You can view demo and download the source code.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codehim.com\/html5-css3\/animated-send-mail-button-in-html-css\/\" \/>\n<meta property=\"og:site_name\" content=\"CodeHim\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codehimofficial\" \/>\n<meta property=\"article:published_time\" content=\"2024-03-21T11:12:11+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codehim.com\/wp-content\/uploads\/2024\/03\/Animated-Send-Mail-Button-in-HTML-CSS.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"960\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Asif Mughal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:site\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Asif Mughal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/codehim.com\/html5-css3\/animated-send-mail-button-in-html-css\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/html5-css3\/animated-send-mail-button-in-html-css\/\"},\"author\":{\"name\":\"Asif Mughal\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\"},\"headline\":\"Animated Send Mail Button in HTML CSS\",\"datePublished\":\"2024-03-21T11:12:11+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/codehim.com\/html5-css3\/animated-send-mail-button-in-html-css\/\"},\"wordCount\":165,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/html5-css3\/animated-send-mail-button-in-html-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2024\/03\/Animated-Send-Mail-Button-in-HTML-CSS.png\",\"articleSection\":[\"HTML5 & CSS3\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/codehim.com\/html5-css3\/animated-send-mail-button-in-html-css\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/codehim.com\/html5-css3\/animated-send-mail-button-in-html-css\/\",\"url\":\"https:\/\/codehim.com\/html5-css3\/animated-send-mail-button-in-html-css\/\",\"name\":\"Animated Send Mail Button in HTML CSS — CodeHim\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/codehim.com\/html5-css3\/animated-send-mail-button-in-html-css\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/html5-css3\/animated-send-mail-button-in-html-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2024\/03\/Animated-Send-Mail-Button-in-HTML-CSS.png\",\"datePublished\":\"2024-03-21T11:12:11+00:00\",\"description\":\"Here is a free code snippet to create a Animated Send Mail Button in HTML CSS. You can view demo and download the source code.\",\"breadcrumb\":{\"@id\":\"https:\/\/codehim.com\/html5-css3\/animated-send-mail-button-in-html-css\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/codehim.com\/html5-css3\/animated-send-mail-button-in-html-css\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/html5-css3\/animated-send-mail-button-in-html-css\/#primaryimage\",\"url\":\"https:\/\/codehim.com\/wp-content\/uploads\/2024\/03\/Animated-Send-Mail-Button-in-HTML-CSS.png\",\"contentUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2024\/03\/Animated-Send-Mail-Button-in-HTML-CSS.png\",\"width\":1280,\"height\":960,\"caption\":\"Animated Send Mail Button in HTML CSS\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/codehim.com\/html5-css3\/animated-send-mail-button-in-html-css\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/codehim.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML5 & CSS3\",\"item\":\"https:\/\/codehim.com\/category\/html5-css3\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Animated Send Mail Button in HTML CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/codehim.com\/#website\",\"url\":\"https:\/\/codehim.com\/\",\"name\":\"CodeHim\",\"description\":\"Web Design Code Snippets\",\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"alternateName\":\"Web Design Codes\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/codehim.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/codehim.com\/#organization\",\"name\":\"CodeHim - Web Design Code & Scripts\",\"url\":\"https:\/\/codehim.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\",\"url\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"contentUrl\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"width\":280,\"height\":280,\"caption\":\"CodeHim - Web Design Code & Scripts\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/codehimofficial\",\"https:\/\/x.com\/CodeHimOfficial\",\"https:\/\/www.instagram.com\/codehim\/\",\"https:\/\/www.linkedin.com\/company\/codehim\",\"https:\/\/co.pinterest.com\/codehim\/\",\"https:\/\/www.youtube.com\/@codehim\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\",\"name\":\"Asif Mughal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"caption\":\"Asif Mughal\"},\"description\":\"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.\",\"sameAs\":[\"https:\/\/codehim.com\"],\"url\":\"https:\/\/codehim.com\/author\/asif-mughal\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Animated Send Mail Button in HTML CSS — CodeHim","description":"Here is a free code snippet to create a Animated Send Mail Button in HTML CSS. You can view demo and download the source code.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/codehim.com\/html5-css3\/animated-send-mail-button-in-html-css\/","og_locale":"en_US","og_type":"article","og_title":"Animated Send Mail Button in HTML CSS — CodeHim","og_description":"Here is a free code snippet to create a Animated Send Mail Button in HTML CSS. You can view demo and download the source code.","og_url":"https:\/\/codehim.com\/html5-css3\/animated-send-mail-button-in-html-css\/","og_site_name":"CodeHim","article_publisher":"https:\/\/www.facebook.com\/codehimofficial","article_published_time":"2024-03-21T11:12:11+00:00","og_image":[{"width":1280,"height":960,"url":"https:\/\/codehim.com\/wp-content\/uploads\/2024\/03\/Animated-Send-Mail-Button-in-HTML-CSS.png","type":"image\/png"}],"author":"Asif Mughal","twitter_card":"summary_large_image","twitter_creator":"@CodeHimOfficial","twitter_site":"@CodeHimOfficial","twitter_misc":{"Written by":"Asif Mughal","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codehim.com\/html5-css3\/animated-send-mail-button-in-html-css\/#article","isPartOf":{"@id":"https:\/\/codehim.com\/html5-css3\/animated-send-mail-button-in-html-css\/"},"author":{"name":"Asif Mughal","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed"},"headline":"Animated Send Mail Button in HTML CSS","datePublished":"2024-03-21T11:12:11+00:00","mainEntityOfPage":{"@id":"https:\/\/codehim.com\/html5-css3\/animated-send-mail-button-in-html-css\/"},"wordCount":165,"commentCount":0,"publisher":{"@id":"https:\/\/codehim.com\/#organization"},"image":{"@id":"https:\/\/codehim.com\/html5-css3\/animated-send-mail-button-in-html-css\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2024\/03\/Animated-Send-Mail-Button-in-HTML-CSS.png","articleSection":["HTML5 & CSS3"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codehim.com\/html5-css3\/animated-send-mail-button-in-html-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codehim.com\/html5-css3\/animated-send-mail-button-in-html-css\/","url":"https:\/\/codehim.com\/html5-css3\/animated-send-mail-button-in-html-css\/","name":"Animated Send Mail Button in HTML CSS — CodeHim","isPartOf":{"@id":"https:\/\/codehim.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codehim.com\/html5-css3\/animated-send-mail-button-in-html-css\/#primaryimage"},"image":{"@id":"https:\/\/codehim.com\/html5-css3\/animated-send-mail-button-in-html-css\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2024\/03\/Animated-Send-Mail-Button-in-HTML-CSS.png","datePublished":"2024-03-21T11:12:11+00:00","description":"Here is a free code snippet to create a Animated Send Mail Button in HTML CSS. You can view demo and download the source code.","breadcrumb":{"@id":"https:\/\/codehim.com\/html5-css3\/animated-send-mail-button-in-html-css\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codehim.com\/html5-css3\/animated-send-mail-button-in-html-css\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/html5-css3\/animated-send-mail-button-in-html-css\/#primaryimage","url":"https:\/\/codehim.com\/wp-content\/uploads\/2024\/03\/Animated-Send-Mail-Button-in-HTML-CSS.png","contentUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2024\/03\/Animated-Send-Mail-Button-in-HTML-CSS.png","width":1280,"height":960,"caption":"Animated Send Mail Button in HTML CSS"},{"@type":"BreadcrumbList","@id":"https:\/\/codehim.com\/html5-css3\/animated-send-mail-button-in-html-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codehim.com\/"},{"@type":"ListItem","position":2,"name":"HTML5 & CSS3","item":"https:\/\/codehim.com\/category\/html5-css3\/"},{"@type":"ListItem","position":3,"name":"Animated Send Mail Button in HTML CSS"}]},{"@type":"WebSite","@id":"https:\/\/codehim.com\/#website","url":"https:\/\/codehim.com\/","name":"CodeHim","description":"Web Design Code Snippets","publisher":{"@id":"https:\/\/codehim.com\/#organization"},"alternateName":"Web Design Codes","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codehim.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/codehim.com\/#organization","name":"CodeHim - Web Design Code & Scripts","url":"https:\/\/codehim.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/","url":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","contentUrl":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","width":280,"height":280,"caption":"CodeHim - Web Design Code & Scripts"},"image":{"@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codehimofficial","https:\/\/x.com\/CodeHimOfficial","https:\/\/www.instagram.com\/codehim\/","https:\/\/www.linkedin.com\/company\/codehim","https:\/\/co.pinterest.com\/codehim\/","https:\/\/www.youtube.com\/@codehim"]},{"@type":"Person","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed","name":"Asif Mughal","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","caption":"Asif Mughal"},"description":"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.","sameAs":["https:\/\/codehim.com"],"url":"https:\/\/codehim.com\/author\/asif-mughal\/"}]}},"views":1197,"_links":{"self":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/11384","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/comments?post=11384"}],"version-history":[{"count":3,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/11384\/revisions"}],"predecessor-version":[{"id":11419,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/11384\/revisions\/11419"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media\/11398"}],"wp:attachment":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media?parent=11384"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/categories?post=11384"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/tags?post=11384"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}