3 CSS 3D Buttons stylish look

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>

3 CSS 3D Buttons stylish look

No comments:

Labels

Popular Posts

Facebook

Blog Archive

Subscribe Us