Merhaba; Kayıtsız Üye , Lütfen Forum Kurallarına Uyunuz..
Toplam 1 adet sonuctan sayfa basi 1 ile 1 arasi kadar sonuc gösteriliyor

Konu: Bootstrap Ribbon Buttons

  1. #1
    Üyelik
    Jul 2018
    Nereden
    İstanbul/Bursa
    Mesajlar
    49

    Bootstrap Ribbon Buttons

    Bootstrap Ribbon Buttons

    CSS KODU:
    Kod:
    /*Remove that CSS*/
    .col-md-3 {
        margin-left:5%;
        }
    /*Remove that CSS*/
    
    
    
    
    
    
    button {
      margin: 20px 0;
      line-height: 34px;
      position: relative;
      cursor: pointer;
      user-select: none;
      outline:none !important;
      width:100%;
    }
    
    
    button:active {
    
    
      outline:none;
    }
    
    
    button.ribbon {
      
      outline:none;
      outline-color: transparent;
    }
    button.ribbon:before, button.ribbon:after {
      top: 5px;
      z-index: -10;
    }
    button.ribbon:before {
      border-color: #53dab6 #53dab6 #53dab6 transparent;
      left: -25px;
      border-width: 17px;
    }
    button.ribbon:after {
      border-color: #53dab6 transparent #53dab6 #53dab6;
      right: -25px;
      border-width: 17px;
    }
    
    
    button:before, button:after {
      content: '';
      position: absolute;
      height: 0;
      width: 0;
      border-style: solid;
      border-width: 0;
      outline:none;
    }
    
    
    button.btn-default:before {
      border-color: #757575 #757575 #757575 transparent;
        }
        button.btn-default:after {
      border-color: #757575 transparent #757575 #757575;
        }
        
        
        
        button.btn-primary:before {
      border-color: #2e6da4 #2e6da4 #2e6da4 transparent;
        }
        button.btn-primary:after {
      border-color: #2e6da4 transparent #2e6da4 #2e6da4;
        }
        
        
        button.btn-success:before {
      border-color: #398439 #398439 #398439 transparent;
        }
        button.btn-success:after {
      border-color: #398439 transparent #398439 #398439;
        }
        
        
        button.btn-info:before {
      border-color: #269abc #269abc #269abc transparent;
        }
        button.btn-info:after {
      border-color: #269abc transparent #269abc #269abc;
        }
        
        
        button.btn-warning:before {
      border-color: #d58512 #d58512 #d58512 transparent;
        }
        button.btn-warning:after {
      border-color: #d58512 transparent #d58512 #d58512;
        }
        
        
        button.btn-danger:before {
      border-color: #ac2925 #ac2925 #ac2925 transparent;
        }
        button.btn-danger:after {
      border-color: #ac2925 transparent #ac2925 #ac2925;
        }
    HTML KODU:
    HTML-Kodu:
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"><script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script><script src="//code.jquery.com/jquery-1.11.1.min.js"></script><!------ Include the above in your HEAD tag ---------->
    <div class="container">	<div class="row">		<h2>Bootstrap Ribbon Buttons</h2>	</div>        <div class="row">        <div class="col-md-6">       <!-- Standard button --><button type="button" class="btn btn-default ribbon">Default</button>
    <!-- Provides extra visual weight and identifies the primary action in a set of buttons --><button type="button" class="btn btn-primary ribbon">Primary</button>
    <!-- Indicates a successful or positive action --><button type="button" class="btn btn-success ribbon">Success</button>
    <!-- Contextual button for informational alert messages --><button type="button" class="btn btn-info ribbon">Info</button>
    <!-- Indicates caution should be taken with this action --><button type="button" class="btn btn-warning ribbon">Warning</button>
    <!-- Indicates a dangerous or potentially negative action --><button type="button" class="btn btn-danger ribbon">Danger</button>
    <!-- Deemphasize a button by making it look like a link while maintaining button behavior --></div>  <div class="col-md-3 ">       <!-- Standard button --><button type="button" class="btn btn-default ribbon">Default</button>
    <!-- Provides extra visual weight and identifies the primary action in a set of buttons --><button type="button" class="btn btn-primary ribbon">Primary</button>
    <!-- Indicates a successful or positive action --><button type="button" class="btn btn-success ribbon">Success</button>
    <!-- Contextual button for informational alert messages --><button type="button" class="btn btn-info ribbon">Info</button>
    <!-- Indicates caution should be taken with this action --><button type="button" class="btn btn-warning ribbon">Warning</button>
    <!-- Indicates a dangerous or potentially negative action --><button type="button" class="btn btn-danger ribbon">Danger</button>
    <!-- Deemphasize a button by making it look like a link while maintaining button behavior --></div>
      <div class="col-md-2 pull-right">       <!-- Standard button --><button type="button" class="btn btn-default  ribbon">Default</button>
    <!-- Provides extra visual weight and identifies the primary action in a set of buttons --><button type="button" class="btn btn-primary ribbon">Primary</button>
    <!-- Indicates a successful or positive action --><button type="button" class="btn btn-success ribbon">Success</button>
    <!-- Contextual button for informational alert messages --><button type="button" class="btn btn-info ribbon">Info</button>
    <!-- Indicates caution should be taken with this action --><button type="button" class="btn btn-warning ribbon">Warning</button>
    <!-- Indicates a dangerous or potentially negative action --><button type="button" class="btn btn-danger ribbon">Danger</button>
    <!-- Deemphasize a button by making it look like a link while maintaining button behavior --></div>         </div>        </div>
    Eklenen Resimler Eklenen Resimler

Bu Konu için Etiketler

Yetkileriniz

  • Konu Acma Yetkiniz Yok
  • Cevap Yazma Yetkiniz Yok
  • Eklenti Yükleme Yetkiniz Yok
  • Mesajınızı Değiştirme Yetkiniz Yok
  •  
RSS RSS 2.0 XML MAP HTML