CSS3 Round Hover Buttons
CSS3 Menu buttons you can use it to make awesome menu or blog labels. it give your website professional design and also you can use them it services website.
The Downloading Link will be coming soon. It will include lot of css round buttons.
How to Use.
How to Use.
- Search for the following tag </b:skin> and paste the below css just above it or you can also add the below css in <style> </style> tags.
@font-face {font-family: 'Chau Philomene One';font-style: normal;font-weight: 400;src: local('Chau Philomene One'), local('ChauPhilomeneOne-Regular'), url(https://fonts.gstatic.com/s/chauphilomeneone/v4/KKc5egCL-a2fFVoOA2x6tNV4OGgus0ZZuirbv7NZEHQ.woff2) format('woff2');unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;}@font-face {font-family: 'Chau Philomene One';font-style: normal;font-weight: 400;src: local('Chau Philomene One'), local('ChauPhilomeneOne-Regular'), url(https://fonts.gstatic.com/s/chauphilomeneone/v4/KKc5egCL-a2fFVoOA2x6tPSfoD-YUik9NQ4drBFqoDc.woff2) format('woff2');unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;}.mbwfacebook {background-repeat:no-repeat;background-position:50% 35%;;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgebAFQFORPUqKISxZb6AedJkkQES990ZtGaVrtsn3Ls1kfrQbMhBzp7_3O1VIY8QcOZN9TZ_a_DAVooQpR3vX_mnmxkNtLP3LjoeOe1RsR-jBzA5enlSXaCV3u1eoyxDmvaWZl9E_Ly04/s1600/facebook-128.png);background-size:38px 38px;background-color:#211421;-webkit-border-top-left-radius:1585px;-moz-border-radius-topleft:1585px;border-top-left-radius:1585px;-webkit-border-top-right-radius:1585px;-moz-border-radius-topright:1585px;border-top-right-radius:1585px;-webkit-border-bottom-right-radius:1585px;-moz-border-radius-bottomright:1585px;border-bottom-right-radius:1585px;-webkit-border-bottom-left-radius:1585px;-moz-border-radius-bottomleft:1585px;border-bottom-left-radius:1585px;display:inline-block;color:#ffffff;font-family: 'Chau Philomene One', sans-serif;font-size:18px;font-weight:normal;font-style:normal;height:150px;line-height:200px;width:150px;text-decoration:none;transition: background 1000ms ease-in-out 0s;-webkit-transition: background 1000ms ease-in-out 0s;-moz-transition: background 1000ms ease-in-out 0s;-o-transition: background 1000ms ease-in-out 0s;-ms-transition: background 1000ms ease-in-out 0s;}.mbwfacebook:hover {background-color:#3b5998;}.mbwfacebook:active {position:relative;top:1px;}.mbwtwitter {background-repeat:no-repeat;background-position:50% 35%;;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9yZUDrg6HAUfTkEz7ZWNbWdeww99pb1Oq9zyxwUkpqX5604mT8LxzFgX-6Hj0Qcgf3JyZ9fXRAJ3OdymnyTUxyqqUoERUhPbWi6tXxKrfKVOAWlsFhtgOFjF6m5Sgs6FZwH1UyfKH-IE/s1600/twitter-128.png);background-size:38px 38px;background-color:#211421;-webkit-border-top-left-radius:1585px;-moz-border-radius-topleft:1585px;border-top-left-radius:1585px;-webkit-border-top-right-radius:1585px;-moz-border-radius-topright:1585px;border-top-right-radius:1585px;-webkit-border-bottom-right-radius:1585px;-moz-border-radius-bottomright:1585px;border-bottom-right-radius:1585px;-webkit-border-bottom-left-radius:1585px;-moz-border-radius-bottomleft:1585px;border-bottom-left-radius:1585px;display:inline-block;color:#ffffff;font-family: 'Chau Philomene One', sans-serif;font-size:18px;font-weight:normal;font-style:normal;height:150px;line-height:200px;width:150px;text-decoration:none;transition: background 1000ms ease-in-out 0s;-webkit-transition: background 1000ms ease-in-out 0s;-moz-transition: background 1000ms ease-in-out 0s;-o-transition: background 1000ms ease-in-out 0s;-ms-transition: background 1000ms ease-in-out 0s;}.mbwtwitter:hover {background-color:#00acee;}.mbwtwitter:active {position:relative;top:1px;}.mbwblogger {background-repeat:no-repeat;background-position:50% 35%;;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggp2LlXbIH7TjpcNgQWir_d9XhJWnpaSaEX_DXJywQSkMGvkUE3YQr_9a5xyIRAELBqWXXzcP9q3COW_B-4x2IBvyfNBKjcDrw6QfGkqBBfDCiXzA2lWmKJLotdLEkeVyPbz0dVeAW-xU/s1600/blogger-128.png);background-size:38px 38px;background-color:#211421;-webkit-border-top-left-radius:1585px;-moz-border-radius-topleft:1585px;border-top-left-radius:1585px;-webkit-border-top-right-radius:1585px;-moz-border-radius-topright:1585px;border-top-right-radius:1585px;-webkit-border-bottom-right-radius:1585px;-moz-border-radius-bottomright:1585px;border-bottom-right-radius:1585px;-webkit-border-bottom-left-radius:1585px;-moz-border-radius-bottomleft:1585px;border-bottom-left-radius:1585px;display:inline-block;color:#ffffff;font-family: 'Chau Philomene One', sans-serif;font-size:18px;font-weight:normal;font-style:normal;height:150px;line-height:200px;width:150px;text-decoration:none;transition: background 1000ms ease-in-out 0s;-webkit-transition: background 1000ms ease-in-out 0s;-moz-transition: background 1000ms ease-in-out 0s;-o-transition: background 1000ms ease-in-out 0s;-ms-transition: background 1000ms ease-in-out 0s;}.mbwblogger:hover {background-color:#fc4f08;}.mbwblogger:active {position:relative;top:1px;}.mbwgoogle {background-repeat:no-repeat;background-position:50% 35%;;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZeBOE246X3U6NANtZlWOpxPhj89gzMipe70gEEv-2Xb5RiYhooF-bwnaecluQVteY14MeK7AeMQQ-uCYY__igMZd2iBnzTCHRIl44ZDcefo4c61jiZ0rWn6PrK1FyZ0WptUyOlShPqXI/s1600/google-plus-128.png);background-size:24px 38px;background-color:#211421;-webkit-border-top-left-radius:1585px;-moz-border-radius-topleft:1585px;border-top-left-radius:1585px;-webkit-border-top-right-radius:1585px;-moz-border-radius-topright:1585px;border-top-right-radius:1585px;-webkit-border-bottom-right-radius:1585px;-moz-border-radius-bottomright:1585px;border-bottom-right-radius:1585px;-webkit-border-bottom-left-radius:1585px;-moz-border-radius-bottomleft:1585px;border-bottom-left-radius:1585px;display:inline-block;color:#ffffff;font-family: 'Chau Philomene One', sans-serif;font-size:18px;font-weight:normal;font-style:normal;height:150px;line-height:200px;width:150px;text-decoration:none;transition: background 1000ms ease-in-out 0s;-webkit-transition: background 1000ms ease-in-out 0s;-moz-transition: background 1000ms ease-in-out 0s;-o-transition: background 1000ms ease-in-out 0s;-ms-transition: background 1000ms ease-in-out 0s;}.mbwgoogle:hover {background-color:#0140ca;}.mbwgoogle:active {position:relative;top:1px;}.mbwYouTube {background-repeat:no-repeat;background-position:50% 35%;;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSaGVS-fgjBIcVmqBze0n3gbXAR5Vd-6EjXMYq7SUHhACxG9TCFGFovd4RXho5m-9jWEAIvBQG3doPRcWOw5A2PIQ-kKaBDDmh0wC0qsJEYie6Jrsl4APT-QI8n_YwafrMw_QBRF8eI4A/s1600/youtube-128.png);background-size:38px 38px;background-color:#211421;-webkit-border-top-left-radius:1585px;-moz-border-radius-topleft:1585px;border-top-left-radius:1585px;-webkit-border-top-right-radius:1585px;-moz-border-radius-topright:1585px;border-top-right-radius:1585px;-webkit-border-bottom-right-radius:1585px;-moz-border-radius-bottomright:1585px;border-bottom-right-radius:1585px;-webkit-border-bottom-left-radius:1585px;-moz-border-radius-bottomleft:1585px;border-bottom-left-radius:1585px;display:inline-block;color:#ffffff;font-family: 'Chau Philomene One', sans-serif;font-size:18px;font-weight:normal;font-style:normal;height:150px;line-height:200px;width:150px;text-decoration:none;transition: background 1000ms ease-in-out 0s;-webkit-transition: background 1000ms ease-in-out 0s;-moz-transition: background 1000ms ease-in-out 0s;-o-transition: background 1000ms ease-in-out 0s;-ms-transition: background 1000ms ease-in-out 0s;}.mbwYouTube:hover {background-color:#FF3333;}.mbwYouTube:active {position:relative;top:1px;}
- Now Copy the below code and paste it any where you want to show CSS Round Buttons.
<a target="_top" href="#" class="mbwfacebook"><span style="color:#ffffff;">Facebook</span></a><a target="_top" href="#" class="mbwtwitter"><span style="color:#ffffff;">Twitter</span></a>
<a target="_top" href="#" class="mbwyoutube"><span style="color:#ffffff;">Youtube</span></a><a target="_top" href="#" class="mbwblogger"><span style="color:#ffffff;">Blogger</span></a><a target="_top" href="#" class="mbwgoogle"><span style="color:#ffffff;">Google+</span></a>
0 comments:
Post a Comment