{"id":31863,"date":"2016-01-28T11:27:16","date_gmt":"2016-01-28T05:57:16","guid":{"rendered":"https:\/\/2thenew.online\/blog\/?p=31863"},"modified":"2016-02-08T14:34:56","modified_gmt":"2016-02-08T09:04:56","slug":"how-to-create-animated-button-with-the-help-of-css","status":"publish","type":"post","link":"https:\/\/2thenew.online\/blog\/how-to-create-animated-button-with-the-help-of-css\/","title":{"rendered":"How to create animated button with the help of css"},"content":{"rendered":"

CSS3 buttons with animation effects that are created. Web designer easy to find more creative though on web design buttons. The effect on the buttons is created using the box-shadows and linear-gradients properties. There are two gradients used basically, one is linear and the second one is radial to make the effect much nicer.<\/strong><\/p>\n

{HTML}<\/strong><\/p>\n

<ul>
\n<li><a href=\"#\" class=\"point green\">Access<span class=\"point\"> have an account<\/span<\/a><\/li>
\n<li><a href=\"#\" class=\"point rad\">Access<span class=\"point\"> really want to. <\/span<\/a><\/li>
\n<li><a href=\"#\" class=\"yallow \"> Access <span class=\"point\">take a look.<\/span><\/a><\/li>
\n<\/ul><\/code><\/p>\n

{CSS}<\/strong><\/p>\n

* {\u00a0 margin: 0; padding: 0; -moz-box-sizing: border-box; -o-box-sizing: border-box;
\n-webkit-box-sizing: border-box; box-sizing: border-box;}<\/code><\/p>\n

body<\/strong> {width: 101%;
\nheight: 101%;
\nfont-family: \"helvetica\";
\nfont-size: 13px;
\ntext-align: center;
\nbackground: #000fff url('http:\/\/subtlepatterns.subtlepatterns.netdna-cdn.com\/patterns\/low_contrast_linen.png');}<\/code><\/p>\n

ul<\/strong> {margin: 29px auto;text-align: center;}<\/code><\/p>\n

li<\/strong> {list-style: none;
\nposition: relative;
\ndisplay: inline-block;
\nwidth: 101px;
\nheight: 101px;}<\/code><\/p>\n

@-moz-keyframes rotate<\/strong> {
\n0% {transform: rotate(0deg);}
\n100% {transform: rotate(-363deg);}
\n }<\/code>
\n@-webkit-keyframes rotate<\/strong> {
\n0% {transform: rotate(0deg);}
\n101% {transform: rotate(-363deg);}
\n}
\n@-o-keyframes rotate<\/strong> {
\n0% {transform: rotate(0deg);}
\n100% {transform: rotate(-363deg);}
\n}
\n@keyframes rotate<\/strong> {
\n0% {transform: rotate(0deg);}
\n100% {transform: rotate(-363deg);}
\n}<\/code><\/p>\n

.point<\/strong> {
\ndisplay: block;
\nposition: absolute;
\nleft: 0;
\ntop: 0;
\nwidth: 100%;
\nheight: 100%;
\npadding-top: 29px;
\ntext-decoration: none;
\ntext-align: center;
\nfont-size: 23px;
\ntext-shadow: 0 1px 0 rgba(255,255,255,.7);
\nletter-spacing: -.063em;
\nfont-family: \"Hammersmith One\", sans-serif;
\n-webkit-transition: all .23s ease-in-out;
\n-o-transition: all .23s ease-in-out;
\n-moz-transition: all .23s ease-in-out;
\ntransition: all .23s ease-in-out;
\nbox-shadow: 2px 2px 7px rgba(0,0,0,.2);
\nborder-radius: 303px;
\nz-index: 1;
\nborder-width: 3px;
\nborder-style: solid;
\n}<\/code><\/p>\n

.point<\/strong>:hover {
\nwidth: 129%;
\nheight: 129%;
\nleft: -15%;
\ntop: -15%;
\nfont-size: 31px;
\npadding-top: 37px;
\n-webkit-box-shadow: 6px 6px 11px rgba(0,0,0,.3);
\n-o-box-shadow: 6px 6px 11px rgba(0,0,0,.3);
\n-moz-box-shadow: 6px 6px 11px rgba(0,0,0,.3);
\nbox-shadow: 6px 6px 11px rgba(0,0,0,.3);
\nz-index: 2;
\nborder-size: 9px;
\n-webkit-transform: rotate(-359deg);
\n-moz-transform: rotate(-359deg);
\n-o-transform: rotate(-359deg);
\ntransform: rotate(-359deg);
\n}<\/code><\/p>\n

a.rad<\/strong> {
\nbackground-color: rgba(239,57,50,1);
\ncolor: rgba(133,32,28,1);
\nborder-color: rgba(133,32,28,.2);
\n}<\/code><\/p>\n

a.rad<\/strong>:hover { color: rgba(239,57,50,1);}
\na.green {
\nbackground-color: rgba(1,151,171,1);
\ncolor: rgba(0,63,71,1);
\nborder-color: rgba(0,63,71,.2);
\n}<\/code><\/p>\n

a.green:hover {color: rgba(1,151,171,1);}<\/code><\/p>\n

a.yallow<\/strong> {
\nbackground-color: rgba(252,227,1,1);
\ncolor: rgba(153,38,0,1);
\nborder-color: rgba(153,38,0,.2);
\n}<\/code><\/p>\n

a.yallow<\/strong>:hover { color: rgba(252,227,1,1);}<\/code>
\n.point span.point {
\ndisplay: block;
\nopacity: 0;
\n-webkit-transition: all .5s ease-in-out;
\n-moz-transition: all .5s ease-in-out;
\n-o-transition: all .5s ease-in-out;
\ntransition: all .5s ease-in-out;
\nfont-size: 1px;
\nborder: none;
\npadding: 50% 27% 0 27%;
\ncolor: #fff;
\n}<\/p>\n

.point<\/strong> span:hover {
\nopacity: .86;
\nfont-size: 17px;
\n-webkit-text-shadow: 0 2px 2px rgba(0,0,0,.6);
\n-moz-text-shadow: 0 2px 2px rgba(0,0,0,.5);
\n-o-text-shadow: 0 2px 2px rgba(0,0,0,.6);
\ntext-shadow: 0 2px 2px rgba(0,0,0,.6);
\n}<\/code><\/p>\n

.green<\/strong> span {\u00a0 background: rgba(0,63,71,.7); }<\/code><\/p>\n

.rad<\/strong> span { background: rgba(133,32,28,.7);\u00a0 }<\/code><\/p>\n

.yallow<\/strong> span { background: rgba(161,145,0,.7); }<\/code>
\n\"buttonimg\"<\/p>\n

\"buttonimg1\"<\/code><\/p>\n","protected":false},"excerpt":{"rendered":"

CSS3 buttons with animation effects that are created. Web designer easy to find more creative though on web design buttons. The effect on the buttons is created using the box-shadows and linear-gradients properties. There are two gradients used basically, one is linear and the second one is radial to make the effect much nicer. {HTML} […]<\/p>\n","protected":false},"author":773,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":4,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-31863","post","type-post","status-publish","format-standard","hentry","category-technology"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t