.style1 .fancy-btn{ border: 1px solid #580141; border-radius: 0; color:#580141; text-transform: uppercase; background: none !important; font-size:15px; position: relative; transition:all 0.5s ease 0s; } .style1 .fancy-btn:after{ content: ""; position: absolute; top:0; left:0; width: 0; height:100%; background: #580141; z-index: -1; transition:all 0.5s ease 0s; } .style1 .fancy-btn:hover:after{ width:100%; } .style1 .fancy-btn:hover{ color:#fff; } .style1 .btn-default{ border: 1px solid #777777ad; color:#777777ad; } .style1 .btn-default:after{ background: #777777ad; } .style1 .btn-white{ border: 1px solid #fff; color:#fff; } .style1 .btn-white:after{ background: #fff; } .style1 .btn-primary{ border: 1px solid #0074cc; color:#0074cc; } .style1 .btn-primary:after{ background: #0074cc; } .style1 .btn-success{ border: 1px solid #5bb75b; color:#5bb75b; } .style1 .btn-success:after{ background: #5bb75b; } .style1 .btn-info{ border: 1px solid #49afcd; color:#49afcd; } .style1 .btn-info:after{ background: #49afcd; } .style1 .btn-warning{ border: 1px solid #faa732; color:#faa732; } .style1 .btn-warning:after{ background: #faa732; } .style1 .btn-danger{ border: 1px solid #da4f49; color:#da4f49; } .style1 .btn-danger:after{ background: #da4f49; } .style1 .btn-magick{ border: 1px solid #9a00cd; color:#9a00cd; } .style1 .btn-magick:after{ background: #9a00cd; } .style2 .fancy-btn{ padding: 15px 25px; text-transform: uppercase; background: none !important; position: relative; transition: all 0.6s ease 0s; } .style2 .fancy-btn:before{ content: ""; position: absolute; top:0; left:0; width: 100%; height:0; z-index: -1; transition: all 0.6s ease 0s; } .style2 .fancy-btn:after{ content: ""; position: absolute; bottom:0; right:0; width: 100%; height:0; z-index: -1; transition: all 0.6s ease 0s; } .style2 .fancy-btn:hover{ color:#fff; } .style2 .btn-default{ border: 1px solid #777777ad; color: #777777ad; } .style2 .btn-default:hover:before, .style2 .btn-default:hover:after{ background: #777777ad; height:50%; } .style2 .btn-white{ border: 1px solid #fff; color: #fff; } .style2 .btn-white:hover:before, .style2 .btn-white:hover:after{ background: #fff; height:50%; } .style2 .btn-primary{ border: 1px solid #0074cc; color: #0074cc; } .style2 .btn-primary:hover:before, .style2 .btn-primary:hover:after{ background: #0074cc; height:50%; } .style2 .btn-success{ border: 1px solid #5bb75b; color: #5bb75b; } .style2 .btn-success:hover:before, .style2 .btn-success:hover:after{ background: #5bb75b; height:50%; } .style2 .btn-info{ border: 1px solid #49afcd; color: #49afcd; } .style2 .btn-info:hover:before, .style2 .btn-info:hover:after{ background: #49afcd; height:50%; } .style2 .btn-warning{ border: 1px solid #faa732; color: #faa732; } .style2 .btn-warning:hover:before, .style2 .btn-warning:hover:after{ background: #faa732; height:50%; } .style2 .btn-danger{ border: 1px solid #da4f49; color: #da4f49; } .style2 .btn-danger:hover:before, .style2 .btn-danger:hover:after{ background: #da4f49; height:50%; } .style2 .btn-magick{ border: 1px solid #9a00cd; color: #9a00cd; } .style2 .btn-magick:hover:before, .style2 .btn-magick:hover:after{ background: #9a00cd; height:50%; } .style3 .fancy-btn{ padding: 25px 35px; text-transform: uppercase; background: none !important; position: relative; border-radius: 0; overflow: hidden; transition:all 0.7s ease 0s; } .style3 .fancy-btn:before{ content: ""; width: 0; height: 0; position: absolute; bottom: 0; left: 0; border-width: 0; border-style: solid; z-index: -1; transition:all 0.7s ease 0s; } .style3 .fancy-btn:after{ content: ""; position: absolute; top: 0; right: 0; width: 0; height: 0; border-width: 0; border-style: solid; z-index: -1; transition:all 0.7s ease 0s; } .style3 .btn-sm:hover:before, .style3 .btn-sm:hover:after{ border-width: 130px 24em; } .style3 .btn-md:hover:before, .style3 .btn-md:hover:after{ border-width: 130px 21em; } .style3 .btn-lg:hover:before, .style3 .btn-lg:hover:after{ border-width: 130px 18em; } .style3 .btn-block:hover:before, .style3 .btn-block:hover:after{ border-width: 130px 46em; } .style3 .fancy-btn:hover{ color:#fff; } .style3 .fancy-btn i{ display: none; } .style3 .btn-default{ border: 1px solid #777777ad; color:#777777ad; } .style3 .btn-default:before{ border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #777777ad; } .style3 .btn-default:after{ border-color: rgba(0, 0, 0, 0) #777777ad rgba(0, 0, 0, 0) rgba(0, 0, 0, 0); } .style3 .btn-white{ border: 1px solid #fff; color:#fff; } .style3 .btn-white:before{ border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #fff; } .style3 .btn-white:after{ border-color: rgba(0, 0, 0, 0) #fff rgba(0, 0, 0, 0) rgba(0, 0, 0, 0); } .style3 .btn-primary{ border: 1px solid #0074cc; color:#0074cc; } .style3 .btn-primary:before{ border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #0074cc; } .style3 .btn-primary:after{ border-color: rgba(0, 0, 0, 0) #0074cc rgba(0, 0, 0, 0) rgba(0, 0, 0, 0); } .style3 .btn-success{ border: 1px solid #5bb75b; color:#5bb75b; } .style3 .btn-success:before{ border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #5bb75b; } .style3 .btn-success:after{ border-color: rgba(0, 0, 0, 0) #5bb75b rgba(0, 0, 0, 0) rgba(0, 0, 0, 0); } .style3 .btn-info{ border: 1px solid #49afcd; color:#49afcd; } .style3 .btn-info:before{ border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #49afcd; } .style3 .btn-info:after{ border-color: rgba(0, 0, 0, 0) #49afcd rgba(0, 0, 0, 0) rgba(0, 0, 0, 0); } .style3 .btn-warning{ border: 1px solid #faa732; color:#faa732; } .style3 .btn-warning:before{ border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #faa732; } .style3 .btn-warning:after{ border-color: rgba(0, 0, 0, 0) #faa732 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0); } .style3 .btn-danger{ border: 1px solid #da4f49; color:#da4f49; } .style3 .btn-danger:before{ border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #da4f49; } .style3 .btn-danger:after{ border-color: rgba(0, 0, 0, 0) #da4f49 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0); } .style3 .btn-magick{ border: 1px solid #9a00cd; color:#9a00cd; } .style3 .btn-magick:before{ border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #9a00cd; } .style3 .btn-magick:after{ border-color: rgba(0, 0, 0, 0) #9a00cd rgba(0, 0, 0, 0) rgba(0, 0, 0, 0); } @media only screen and (max-width: 767px) { .btn{ margin-bottom: 15px; } }