Button html5 css rhombus hình thoi, bầu dục cơ bản

Thảo luận trong 'Ngôn ngữ lập trình CSS, HTML, HTML5' bắt đầu bởi admin, 9/9/20.

  1. admin

    admin Phạm Công Sơn Thành viên BQT

    Tham gia ngày:
    22/5/13
    Bài viết:
    4,380
    Đã được thích:
    1,059
    Điểm thành tích:
    113
    Giới tính:
    Nam
    1. CSS HMTL 1
    • CSS nút button với hình nhọn ở 2 bên đầu sử dụng kỹ thuật css to màu bằng border
    hinh-1.jpg
    CSS:
    HTML:
    .form {
        width: 400px;
        height: 80px;
        margin: 0px auto;
        background: #1E9BAF;
        position: relative;
        box-shadow: -7px 15px 0px -5px rgba(0, 0, 0, 0.3);
    }
    
    .triangle,
    .triangle > div {
        width: 0px;
        height: 0px;
        position: absolute;
        border: 40px solid transparent;
    }
    
    .leftTriangle {
        left: -55px;
        border-right: 15px solid #1E9BAF;
    }
    
    .leftTriangle > div {
      left: -42px;
      top: -30px;
      z-index: -1;
      border-right: 15px solid rgba(0, 0, 0, 0.3);
    }
    
    .rightTriangle {
        right: -55px;
        border-left: 15px solid #1E9BAF;
    }
    
    .rightTriangle > div {
      right: -28px;
      top: -30px;
      z-index: -1;
      border-left: 15px solid rgba(0, 0, 0, 0.3);
    } 
    HTML
    Mã:
    <div class="form">
        <div class="triangle leftTriangle">
            <div></div>
        </div>
        <div class="triangle rightTriangle">
            <div></div>
        </div>
    </div>
    
    2. CSS HMTL 2
    • Css button với hình nhọn ở 2 bên đầu sử dụng kỹ thuật to background-color nguyên khối sau đó xoay khối lại.
    HINH-2.jpg
    CSS
    HTML:
    .lngbtn {
        position: relative;
        width: 150px;
        height: 50px;
        margin: 50px;
        color: #FFFFFF;
        background-color: #f4d046;
        text-align: center;
        line-height: 48px;
        padding: 16px;
        font-weight: bold;
    }
    .lngbtn:before {
         content:"";
           transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        background-color: #f4d046;
        width:38px;
        height:39px;
        top: 5.3px;
        right: 85%;
        position:absolute;
        border-radius:6px;
        z-index:-1;
       }
    .lngbtn:after {
           content:"";
           transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        background-color: #f4d046;
        width:38px;
        height:39px;
        top: 5.3px;
        left: 85%;
        position:absolute;
        border-radius:6px;
        z-index:-1;
    }
    HMTL
    Mã:
    <a href="#" class="lngbtn">Get to know us</a>
    Bài viết liên quan: https://itseovn.com/threads/css-hin...t-tam-giac-luc-giac-ngoi-sao-trai-tim.320619/
     
    Cảm ơn đã xem bài:

    Button html5 css rhombus hình thoi, bầu dục cơ bản

    danh sách diễn đàn rao vặt gov chất lượng
    Chỉnh sửa cuối: 19/9/20


Like và Share ủng hộ ITSEOVN