Hãy đăng ký thành viên để có thể dễ dàng trao đổi, giao lưu và chia sẻ về kiến thức đồ họa.
  1. Hãy đăng ký subscribe kênh Youtube mới của Việt Designer tại địa chỉ: Youtube.com/VietDesignerChannel để theo dõi các video về thiết kế đồ họa. Do trước đó kênh cũ bị Youtube quét không rõ lý do, trong thời gian chờ kháng cáo nếu các bạn thấy video trên diễn đàn bị die không xem được thì có thể vào kênh mới để tìm xem video sơ cua nhé.
    Loại bỏ thông báo

Tạo hiệu ứng button cực đẹp cho Blogspot

Chủ đề thuộc danh mục 'Hướng dẫn/Thủ thuật Blogspot tại đây' được đăng bởi mahu220, 30/5/17.

Lượt xem: 1,729

  1. mahu220 Thành viên cấp 2

    [​IMG]

    DEMO: http://codepen.io/Beohoavinh/full/ygrJOw/


    Code:


    Code:
       <
    	
    button class="draw">draw</button>
               <
    	
    button class="draw meet">draw meet</button>
               <
    	
    button class="center">center</button>
               <
    	
    button class="spin">spin</button>
               <
    	
    button class="spin circle">spin circle</button>
               <
    	
    button class="spin thick">spin thick</button>




    CSS:

    Code:
    	
    button {
      background: none;
      border: 0;
      box-sizing: border-box;
      box-shadow: inset 0 0 0 2px #f45e61;
      color: #f45e61;
      font-size: inherit;
      font-weight: 700;
      margin: 1em;
      padding: 1em 2em;
      text-align: center;
      text-transform: capitalize;
      position: relative;
      vertical-align: middle;
    }
    
    	
    button::before, 
    	
    button::after {
      box-sizing: border-box;
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
    }
    
    .draw {
      -webkit-transition: color 0.25s;
             transition: color 0.25s;
    }
    .draw::before, .draw::after {
      border: 2px solid transparent;
      width: 0;
      height: 0;
    }
    .draw::before {
      top: 0;
      left: 0;
    }
    .draw::after {
      bottom: 0;
      right: 0;
    }
    .draw:hover {
      color: #60daaa;
    }
    .draw:hover::before, .draw:hover::after {
      width: 100%;
      height: 100%;
    }
    .draw:hover::before {
      border-top-color: #60daaa;
      border-right-color: #60daaa;
      -webkit-transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
             transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
    }
    .draw:hover::after {
      border-bottom-color: #60daaa;
      border-left-color: #60daaa;
      -webkit-transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
             transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
    }
    
    .meet:hover {
      color: #fbca67;
    }
    .meet::after {
      top: 0;
      left: 0;
    }
    .meet:hover::before {
      border-top-color: #fbca67;
      border-right-color: #fbca67;
    }
    .meet:hover::after {
      border-bottom-color: #fbca67;
      border-left-color: #fbca67;
      -webkit-transition: height 0.25s ease-out, width 0.25s ease-out 0.25s;
             transition: height 0.25s ease-out, width 0.25s ease-out 0.25s;
    }
    
    .center:hover {
      color: #6477b9;
    }
    .center::before, .center::after {
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      -webkit-transform-origin: center;
         -ms-transform-origin: center;
             transform-origin: center;
    }
    .center::before {
      border-top: 2px solid #6477b9;
      border-bottom: 2px solid #6477b9;
      -webkit-transform: scale3d(0, 1, 1);
             transform: scale3d(0, 1, 1);
    }
    .center::after {
      border-left: 2px solid #6477b9;
      border-right: 2px solid #6477b9;
      -webkit-transform: scale3d(1, 0, 1);
             transform: scale3d(1, 0, 1);
    }
    .center:hover::before, .center:hover::after {
      -webkit-transform: scale3d(1, 1, 1);
             transform: scale3d(1, 1, 1);
      -webkit-transition: -webkit-transform 0.5s;
             transition: transform 0.5s;
    }
    
    .spin {
      width: 6em;
      height: 6em;
      padding: 0;
    }
    .spin:hover {
      color: #0eb7da;
    }
    .spin::before, .spin::after {
      top: 0;
      left: 0;
    }
    .spin::before {
      border: 2px solid transparent;
    }
    .spin:hover::before {
      border-top-color: #0eb7da;
      border-right-color: #0eb7da;
      border-bottom-color: #0eb7da;
      -webkit-transition: border-top-color 0.15s linear, border-right-color 0.15s linear 0.1s, border-bottom-color 0.15s linear 0.2s;
             transition: border-top-color 0.15s linear, border-right-color 0.15s linear 0.1s, border-bottom-color 0.15s linear 0.2s;
    }
    .spin::after {
      border: 0 solid transparent;
    }
    .spin:hover::after {
      border-top: 2px solid #0eb7da;
      border-left-width: 2px;
      border-right-width: 2px;
      -webkit-transform: rotate(270deg);
         -ms-transform: rotate(270deg);
             transform: rotate(270deg);
      -webkit-transition: -webkit-transform 0.4s linear 0s, border-left-width 0s linear 0.35s;
             transition: transform 0.4s linear 0s, border-left-width 0s linear 0.35s;
    }
    
    .circle {
      border-radius: 100%;
      box-shadow: none;
    }
    .circle::before, .circle::after {
      border-radius: 100%;
    }
    
    .thick {
      color: #f45e61;
    }
    .thick:hover {
      color: #fff;
      font-weight: 700;
    }
    .thick::before {
      border: 3em solid transparent;
      z-index: -1;
    }
    .thick::after {
      mix-blend-mode: color-dodge;
      z-index: -1;
    }
    .thick:hover::before {
      background: #f45e61;
      border-top-color: #f45e61;
      border-right-color: #f45e61;
      border-bottom-color: #f45e61;
      -webkit-transition: background 0s linear 0.4s, border-top-color 0.15s linear, border-right-color 0.15s linear 0.15s, border-bottom-color 0.15s linear 0.25s;
      transition: background 0s linear 0.4s, border-top-color 0.15s linear, border-right-color 0.15s linear 0.15s, border-bottom-color 0.15s linear 0.25s;
    }
    .thick:hover::after {
      border-top: 3em solid #f45e61;
      border-left-width: 3em;
      border-right-width: 3em;
    }
    Mọi chi tiết liên hệ FB.COM/BEOHOAVINH
    (viet78.tk)

    Chỉnh sửa lần cuối: 16/11/17
  2. Phạm Hữu Dư

    Phạm Hữu Dư phamhuudu.com Ban quản trị

    Cả 3 topic bạn vừa đăng đều vi phạm nội quy tiêu đề, nhưng vì đều là chia sẻ nên mình du di fix và nhắc nhở, lần sau bạn lưu ý giùm :)
    mahu220 thích bài viết này
  3. mahu220

    mahu220 Thành viên cấp 2

Ủng hộ diễn đàn