Apna Hai - W3 HTML CSS Courses Tutorials: Button

Results for Button

CSS Buttons 16 Best Stylish Button

W3 HTML CSS Courses Tutorials December 04, 2020

CSS Buttons

Button css style example css button hover effects button css generator modern css buttons button css codepen button shadow css button animation css button, This set of stylish animated CSS buttons are ideal for use by bloggers. ... across a button from left to right (and vice versa), from top to bottom

This Code Supproted All Website and Blogger
Jast Copy And Paste Your Site

CSS Buttons

Button Colors

Button Sizes

Rounded Buttons

Colored Button Borders

<!DOCTYPE html><html><head><style>.button {   background-color: #4CAF50; /* Green */   border: none;   color: white;   padding: 15px 32px;   text-align: center;   text-decoration: none;   display: inline-block;   font-size: 16px;   margin: 4px 2px;   cursor: pointer; }  .button1 {   background-color: white;    color: black;    border: 2px solid #4CAF50; }  .button2 {   background-color: white;    color: black;    border: 2px solid #008CBA; }  .button3 {   background-color: white;    color: black;    border: 2px solid #f44336; }  .button4 {   background-color: white;   color: black;   border: 2px solid #e7e7e7; }  .button5 {   background-color: white;   color: black;   border: 2px solid #555555; } </style></head><body> <h2>Colored Button Borders</h2><p>Use the border property to add a border to the button:</p><button class="button button1">Green</button><button class="button button2">Blue</button><button class="button button3">Red</button><button class="button button4">Gray</button><button class="button button5">Black</button> </body></html>

Hoverable Buttons

<!DOCTYPE html><html><head><style>.button {   background-color: #4CAF50; /* Green */   border: none;   color: white;   padding: 16px 32px;   text-align: center;   text-decoration: none;   display: inline-block;   font-size: 16px;   margin: 4px 2px;   -webkit-transition-duration: 0.4s; /* Safari */   transition-duration: 0.4s;   cursor: pointer; }  .button1 {   background-color: white;    color: black;    border: 2px solid #4CAF50; }  .button1:hover {   background-color: #4CAF50;   color: white; }  .button2 {   background-color: white;    color: black;    border: 2px solid #008CBA; }  .button2:hover {   background-color: #008CBA;   color: white; }  .button3 {   background-color: white;    color: black;    border: 2px solid #f44336; }  .button3:hover {   background-color: #f44336;   color: white; }  .button4 {   background-color: white;   color: black;   border: 2px solid #e7e7e7; }  .button4:hover {background-color: #e7e7e7;}  .button5 {   background-color: white;   color: black;   border: 2px solid #555555; }  .button5:hover {   background-color: #555555;   color: white; } </style></head><body> <h2>Hoverable Buttons</h2><p>Use the :hover selector to change the style of the button when you move the mouse over it.</p><p><b>Tip:</b> Use the transition-duration property to determine the speed of the "hover" effect:</p><button class="button button1">Green</button><button class="button button2">Blue</button><button class="button button3">Red</button><button class="button button4">Gray</button><button class="button button5">Black</button> </body></html>

Shadow Buttons

Disabled Buttons

Button Width

Button Groups

Bordered Button Group

Vertical Button Group

Button on Image

Animated Button

Animated Buttons - Pressed Effect

3 CSS 3D Buttons stylish look

W3 HTML CSS Courses Tutorials December 02, 2020

Collection of hand picked free CSS And HTML and javascript 3D button code example.

Collection of hand-picked free HTML and CSS 3D button code, A nice looking 3d button created using CSS3 and Google fonts. Image for post Buttons, This set of stylish animated CSS buttons are ideal for use by bloggers. develop a drop shadow effect that makes the buttons appear to lift off, Bootstrap example of 3D Buttons Effects using HTML, Javascript, jQuery, and CSS

place this code yore website or blogger
Looking Very Nice

3D Button

<!doctype html><html><head><style> body, html{   height: 100%;   text-align: center;   font-size: 40px;   font-family: Ubuntu, sans-serif; } body:before, .btn {   display: inline-block;   vertical-align: middle; } body:before {   height: 100%;   content: ''; } .btn, .btn:before, .btn:after {   cursor: pointer;   padding: 0.5em 2em;   display: inline-block;   background-color: rgba(127, 157, 181, 0.6);   color: #fff;   border-radius: 6px;   position: relative;   -webkit-transition: all 0.5s cubic-bezier(0.5, 0, 0.5, 1);   transition: all 0.5s cubic-bezier(0.5, 0, 0.5, 1);   box-shadow: 0 0 0 rgba(0,0,0,0); }  .btn:before, .btn:after {   position: absolute;   content: attr(data-title);   z-index: -1; }  .btn:before {   top: -0.1em;   right: -0.1em;   background-color: rgba(255, 0, 0, 0.5); }  .btn:after {   bottom: -0.1em;   left: -0.1em;   background-color: rgba(0, 0, 255, 0.5); }  .btn:hover {   background-color: rgba(127, 157, 181, 1);   box-shadow: 0.05em 0.05em 0.1em rgba(0,0,0,0.5);  }  .btn:hover:before {   top: 0;   right: 0; } .btn:hover:after {   bottom: 0;   left: 0; }   </style> </head><body> <div class="btn" data-title="Wibble">Wibble</div></body></html>

3D Button

<!doctype html><html><head><style> @charset "utf-8"; /*Button -----------------*/ button{   outline:0;    font-size:1em;   font-weight:600;   background:#fff;   border:none;   padding:2em 4em;   transition:all .3s ease-out;    box-shadow:inset 0 -8px 0 0 rgba(0,0,0,.2),     1px 1px 0 0 #d98e20,     2px 2px 0 0 #d98e20,     3px 3px 0 0 #d98e20,     4px 4px 0 0 #d98e20,     5px 5px 0 0 #d98e20,     6px 6px 0 0 #d98e20,     7px 7px 0 0 #d98e20,     8px 8px 0 0 #d98e20,     9px 9px 0 0 #d98e20,     10px 10px 0 0 #d98e20,     11px 11px 0 0 #d98e20,     12px 12px 0 0 #d98e20; } button:hover{   color:#444; } button:active{   color:#222;   box-shadow:inset 0 -4px 0 0 rgba(0,0,0,.2),     1px 1px 0 0 #d98e20,     2px 2px 0 0 #d98e20,     3px 3px 0 0 #d98e20,     4px 4px 0 0 #d98e20,     5px 5px 0 0 #d98e20; } /*General Styling -----------------*/ body{  width:100%;  min-height:100%;  background-color:#FFA726;  color:#eee; } main{  position:relative;  margin:auto;  width:100%;  height:100%;   text-align:center;   padding:45vh 0; }   </style> </head><body> <main>  <button>Click Me!</button></main> </body></html>

Animation Button

<!doctype html><html><head><style>html, body {  height: 100%;  display: flex;  align-items: center;  justify-content: center;  background-color: skyblue; }  .box {  background: linear-gradient(to right, gold, darkorange);  color: white;  --width: 250px;  --height: calc(var(--width) / 3);  width: var(--width);  height: var(--height);  text-align: center;  line-height: var(--height);  font-size: calc(var(--height) / 2.5);  font-family: sans-serif;  letter-spacing: 0.2em;  border: 1px solid darkgoldenrod;  border-radius: 2em;  transform: perspective(500px) rotateY(-15deg);  text-shadow: 6px 3px 2px rgba(0, 0, 0, 0.2);  box-shadow: 2px 0 0 5px rgba(0, 0, 0, 0.2);  transition: 0.5s;  position: relative;  overflow: hidden; }  .box:hover {  transform: perspective(500px) rotateY(15deg);  text-shadow: -6px 3px 2px rgba(0, 0, 0, 0.2);  box-shadow: -2px 0 0 5px rgba(0, 0, 0, 0.2); }  .box::before {  content: '';  position: absolute;  width: 100%;  height: 100%;  background: linear-gradient(to right, transparent, white, transparent);  left: -100%;  transition: 0.5s; }  .box:hover::before {  left: 100%; } </style> </head><body><div class="box">BUTTON</div></body></html>

How to Create Custom Social Share Buttons

W3 HTML CSS Courses Tutorials December 02, 2020

Social media sharing is mostly needed for any web project.

Customizing your buttons can help them stand out and be a bit more eye-catching than the standard social buttons, Create Social Sharing Buttons, Custom Sharing Buttons for Social Media. These files contain a basic template for creating customized social media share buttons on a web page, Step by step guide on how to add social share buttons in WordPress with total ... In this article, we'll show you how to easily add social share buttons

Some advantages of social media sharing
Less marketing costs
Increase sales.
Increase traffic to your website.
Search engine optimization ranking.

There are many free and easy-to-use services. But all social sharing plugins use a lot of JavaScript, which increases page load time. So, using a social sharing button with custom links is a good idea if you want to customize the social sharing button according to your project theme and fast load page.

Share This

<center><h8 class='share-title'>Share This:</h8>               <div class='share-art'>  <a class='fac-art' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title="+ data:post.title' onclick='window.open(this.href, 'windowName', 'width=600, height=400, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifGZ1y1q0vdBeaa_eFMwWxCCyVcSeWJIuYFVzbA_BmAufYWa5vKituerjs3at96_RuYBwkzmRzlsq4bouIaB5hRGCa-ygX-0bRwWLk5MaadbBiDAuQ98yuO4fPUAqnLyJ1tijipPWGchlV/s1600/fb.png'/></a> <a class='twi-art' expr:href='"http://twitter.com/share?url=" + data:post.url + "&title=" + data:post.title' onclick='window.open(this.href, 'windowName', 'width=600, height=400, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPgXrQICkPUX31MusO-vucOES59zGTUsCkIQQxW67CELETAS5bFiQwanlZyAdmf9Ui0CqVwIxAhrFiLTOwgoLQw0RAMzskdQRMbzq7UxzjEHw1eAZlyLhNI8eyf5GxCDANjcnWeIMxhc4P/s1600/t.png'/></a> <a class='goo-art' expr:href='"https://plus.google.com/share?url=" + data:post.url + "&title=" + data:post.title' onclick='window.open(this.href, 'windowName', 'width=600, height=400, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikdZjbb8BcZ1Vgp1miIVe_nv9mfV6sUxUzPlObhL6PU_FNU6mDTyswJPWf3mCOE5XWTN-f11csCAYZisnnXbkVLeD1S-lZQTUWjW0uZfOaugG40B7y_NfJGPlapIsXvgGc8yWf5X3gjlWI/s1600/g.png'/></a> <a class='pin-art' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&media=" + data:post.firstImageUrl + "&description=" + data:post.snippet' onclick='window.open(this.href, 'windowName', 'width=600, height=400, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhi6chVf5YUHLq7WzK0T4YqcKafS-AAS4mRA-HOG-kLeEb14P-F8Aw8sQLWAZOUfqz_ikiCOFoUQLBN08dopYO7Dlx3UDb6qkmaK7-UdAH_BpMZZ_Ah60JcbsmsBmp3HL98KMNPiMvU-GMA/s1600/p.png'/></a>    <a class='lin-art' expr:href='"http://www.linkedin.com/shareArticle?url=" + data:post.url + "&title="+ data:post.title' onclick='window.open(this.href, 'windowName', 'width=600, height=400, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQ5SxwpbnS_P0WmA3ruc2h9pYJHIK7AwGwKyUdxCN1kIKeVvc6ZuzlrpdZSqQEqN6UNniDVK5eDSON8tsDq_o3B6dqMrWa4BD7yCbsIHvFCYIoNfxQ3_-QOeReiEDZqwEX7pCmfnzAF5sh/s1600/l.png'/></a> </div></center>

How to Create Custom Social Share Buttons

Share This

<center><h8 class='share-title'>Share This:</h8>               <div class='share-art'>  <a class='fac-art' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title="+ data:post.title' onclick='window.open(this.href, 'windowName', 'width=600, height=400, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><img height='38' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvpX-DBlMFIFkvE6X7yy1eZrDy2eleTNH0VkUiGmUYcOaJLOC44SxBN2JenDJ_dmtM1V4UG_DfU3DIF8P1BobXZIqTj-MYayQnX5sAJGXFQK_v0iW8glmsXEUYR11-lN5erie8_V9wWpE/s1600/fb.png' width='42'/></a> <a class='twi-art' expr:href='"http://twitter.com/share?url=" + data:post.url + "&title=" + data:post.title' onclick='window.open(this.href, 'windowName', 'width=600, height=400, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><img height='38' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwIhCEwgcYPCJ_x7QeCKnbyIbpl7ljN_queLtjXU-eTLsLT4HPhlzr4l4iYJhRWigH47DyQqX2zAwQExU7E9E84630GS1h_1stg37J8RZa-cSiz5gkdt8rRgHDIKQH_HKMkag9XPm21Ag/s1600/t.png' width='42'/></a> <a class='goo-art' expr:href='"https://plus.google.com/share?url=" + data:post.url + "&title=" + data:post.title' onclick='window.open(this.href, 'windowName', 'width=600, height=400, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><img height='38' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy4IhNba4GJwWTeVGpd0Q2-qPwOcWO5ApVlK-QIKtxdIfl58SYb74GSu6OdC_hbeD9nhXLLcpOmtakKdaICEe3m-UgNEMuJn7woNojYRyULE0xzPBpMnh0RdzI-toqabkdemTd4u9DobQ/s1600/G.png' width='42'/></a> <a class='pin-art' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&media=" + data:post.firstImageUrl + "&description=" + data:post.snippet' onclick='window.open(this.href, 'windowName', 'width=600, height=400, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><img height='38' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4ckoAyyW4B3tdtJ_8YXwFCwKh3uMNfcr06LfIeNrKuF0yHijLrap04GklLkncDSWMYUP2SbHszDeMB1Kk8buFMxb7r2ZNTsiiIj1WJDlsir12u-nMcW1edy3x0g7p7hHP2xCBPWITSAU/s1600/p.png' width='42'/></a>    <a class='lin-art' expr:href='"http://www.linkedin.com/shareArticle?url=" + data:post.url + "&title="+ data:post.title' onclick='window.open(this.href, 'windowName', 'width=600, height=400, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><img height='38' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdo-D2wYZhmDc2z-47Ggd6xcO0_jiInD7J3dRMke-l6V45XIh2jaOrn7YvGJhOzMTlvcqOUrPdAUSxpzUNLf-beqjhB40kKQxovPgR2ymMleIyVDYfue-dcZTMctgtEi5fJSuz32GOgWs/s1600/in.png' width='42'/></a> </div></center>

In this short article, we will provide custom social sharing links for some popular social media. Using those links you can create social sharing buttons for sharing webpage URLs without javascript.
Or Manuali Link Share
Use This Code

Facebook Custom Share Link:
http://www.facebook.com/sharer.php?u=[EncodedURL]
Twitter Custom Share Link:
http://twitter.com/share?text=[TITLE]&url=[URL]
Google+ Custom Share Link:
https://plus.google.com/share?url=[EncodedURL]
LinkedIn Custom Share Link:
http://www.linkedin.com/shareArticle?mini=true&url=[EncodedURL]
Pinterest Custom Share Link:
http://pinterest.com/pin/create/button/?url=[EncodedURL]&media=[MEDIA]
StumbleUpon Custom Share Link:
http://www.stumbleupon.com/badge/?url=[URL]
Reddit Custom Share Link:
http://www.reddit.com/submit?url=[EncodedURL]
E-Mail Custom Share Link:
mailto:?subject=[SUBJECT]&body=Check out this site [URL]

Subscribe to: Posts ( Atom )

CSS Buttons 16 Best Stylish Button

3 CSS 3D Buttons stylish look

How to Create Custom Social Share Buttons

Social media sharing is mostly needed for any web project.

Labels

Popular Posts

Facebook

Blog Archive

Subscribe Us