58 lines
4.2 KiB
CSS
58 lines
4.2 KiB
CSS
/*
|
|
Template: Webster - Responsive Multi-purpose HTML5 Template
|
|
Author: potenzaglobalsolutions.com
|
|
Design and Developed by: potenzaglobalsolutions.com
|
|
|
|
NOTE: This file contains button CSS.
|
|
*/
|
|
|
|
/***************************
|
|
button
|
|
***************************/
|
|
.button { background: #FC5C3C; padding: 12px 20px; font-size: 13px; letter-spacing: 1px; font-family: 'Nanum Gothic', serif; border: 0; color: #ffffff; text-transform: uppercase; font-weight: 400; display: inline-block; border-radius: 30px; text-align: center; border:2px solid #FC5C3C; }
|
|
.button + .button {margin-left: 20px;}
|
|
.button:hover, .button:focus { background: #353535; color: #ffffff; border-color: #353535; }
|
|
button { transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; }
|
|
.button.black { background: #353535; color: #ffffff; border:2px solid #353535;}
|
|
.button.black:hover, .button.black.active, .button.black:focus { background: #FC5C3C; color: #ffffff; border-color: #FC5C3C; }
|
|
.button.gray { background: #e0e0e0; color: #353535; border:2px solid #e0e0e0; }
|
|
.button.gray:hover, .button.gray.active, .button.gray:focus { background: #FC5C3C; color: #ffffff; border-color: #FC5C3C;}
|
|
.button.white { background: #fff; color: #FC5C3C; }
|
|
.button.white:hover, .button.white:focus { background: #353535; color: #ffffff;}
|
|
.button.opacity { background: rgba(245,166,35,0.6); color: #fff; border:0;}
|
|
.button.opacity:hover, .button.opacity:focus { background: #FC5C3C; color: #ffffff; border:0;}
|
|
.button.border { background: transparent; border: 2px solid #FC5C3C; color: #323232; }
|
|
.button.border:hover, .button.border:focus { background: #FC5C3C; color: #ffffff; border-color: #FC5C3C; }
|
|
.button.border.gray { background: transparent; border: 2px solid #e0e0e0; color: #aaaaaa; }
|
|
.button.border.gray:hover, .button.border.gray:focus { background: #FC5C3C; color: #ffffff; border-color: #FC5C3C; }
|
|
.button.border.white { background: transparent; border: 2px solid #fff; color: #fff; }
|
|
.button.border.white:hover, .button.border.white:focus { background: #fff; color: #FC5C3C; border-color: #fff; }
|
|
.button.border.black { background: transparent; border: 2px solid #353535; color: #353535; }
|
|
.button.border.black:hover, .button.border.black:focus { background: #353535; color: #ffffff; border-color: #353535; }
|
|
.button.icon i { margin-left: 10px; }
|
|
/*button with icon*/
|
|
.button.arrow { background: transparent; border: none; color: #FC5C3C; padding: 0; font-weight: 600; }
|
|
.button.arrow i { padding-left: 10px; font-size: 16px; }
|
|
.button.arrow:hover { color: #353535; }
|
|
.button.arrow.white { color: #ffffff; border: none; }
|
|
.button.arrow.white:hover { color: #aaaaaa; background: transparent; }
|
|
.button.icon-color{background: none; border: none; color: #FC5C3C; padding: 0}
|
|
.button.icon-color:hover{color: #353535; background: transparent; }
|
|
.button.icon-color i{border: 1px solid #FC5C3C; border-radius: 50%; height: 22px; width: 22px; line-height: 20px; margin-left: 10px; transform: translateX(0px); transition: all 0.5s cubic-bezier(0.76, 0.46, 0.22, 1) 0s;}
|
|
.button.icon-color:hover i{background: #353535; border-color: #353535; color: #ffffff; transform: translateX(3px);}
|
|
.button.icon-color.white:hover, .button.icon-color.white:focus{color: #ffffff; border:none; background: none;}
|
|
.button.icon-color.white:hover i, .button.icon-color.white:focus i{background: #ffffff; color: #FC5C3C;}
|
|
.theme-bg .button.icon-color{color: #ffffff;}
|
|
.theme-bg .button.icon-color i {border-color: #ffffff;}
|
|
.theme-bg .button.icon-color:hover i { background: #ffffff; color: #FC5C3C; }
|
|
.big-button { padding: 28px 30px; font-size: 24px; }
|
|
.big-button span { display: block; font-size: 12px; margin-top: 6px;}
|
|
.button.x-small { padding: 8px 14px; font-size: 12px; }
|
|
.button.small { padding: 10px 18px; font-size: 12px; }
|
|
.button.medium { padding: 12px 20px; font-size: 14px; }
|
|
.button.large { padding: 14px 20px; font-size: 15px; }
|
|
.button.wide { padding: 8px 50px; font-size: 20px; }
|
|
|
|
.button + .button.btn-block { margin-left: 0; }
|
|
/*button dropdown */
|
|
.btn-dropdown { width:100%; padding:8px; font-size:12px; background-color:#fff; border-radius: 0px; border:1px solid #979797; } |