3 CSS3 3D Button Stylish Look

Collection of hand picked free CSS And HTML and javascript 3D button code example.
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>

Latest Jobs

Tags

Post Top Ad

Friday, 14 February 2020

3 CSS3 3D Button Stylish Look

No comments:

Post a Comment

Post Top Ad

Popular

Archive

Subscribe Us

Tags