You are here

on_hover_button.css in Better Search Block 7

Same filename and directory in other branches
  1. 8 css/on_hover_button.css
i.better_search {
  background: url("images/search-icon.svg") center center no-repeat;
  height: 1.1em;
  width: 1em;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
}

#search-block-form {
  overflow: hidden;
  vertical-align: middle;
  white-space: nowrap;
}

.form-item-search-block-form input.form-text {
  height: 50px;
  background: #2b303b; /* Search field BG */
  border: none;
  font-size: 1em;
  float: left;
  color: #fff;
  padding-left: 15px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px; 
  z-index: 100;
}

#search-block-form .icon {
  border: none;
  height: 50px;
  width: 50px;
  color: #4f5b66;
  opacity: 0;
  -webkit-transition: all .55s ease;
  -moz-transition: all .55s ease;
  -ms-transition: all .55s ease;
  -o-transition: all .55s ease;
  transition: all .55s ease;
}

.form-item-search-block-form input:-webkit-input-placeholder {
  color: #65737e;
}
 
.form-item-search-block-form input:-moz-placeholder {
  color: #65737e;
}

.form-item-search-block-form input:-ms-input-placeholder {
  color: #65737e;
}

#search-block-form:hover .icon,
#search-block-form:focus .icon,
#search-block-form:active .icon {
  outline: none;
  opacity: 1;
  margin-left: -50px;
}

#search-block-form:hover {
  cursor: pointer;
  cursor: hand;
}

#search-block-form:hover .icon {
  background: white;
}

File

css/on_hover_button.css
View source
  1. i.better_search {
  2. background: url("images/search-icon.svg") center center no-repeat;
  3. height: 1.1em;
  4. width: 1em;
  5. font-style: normal;
  6. font-weight: normal;
  7. line-height: 1;
  8. -webkit-font-smoothing: antialiased;
  9. display: inline-block;
  10. }
  11. #search-block-form {
  12. overflow: hidden;
  13. vertical-align: middle;
  14. white-space: nowrap;
  15. }
  16. .form-item-search-block-form input.form-text {
  17. height: 50px;
  18. background: #2b303b; /* Search field BG */
  19. border: none;
  20. font-size: 1em;
  21. float: left;
  22. color: #fff;
  23. padding-left: 15px;
  24. -webkit-border-radius: 5px;
  25. -moz-border-radius: 5px;
  26. border-radius: 5px;
  27. z-index: 100;
  28. }
  29. #search-block-form .icon {
  30. border: none;
  31. height: 50px;
  32. width: 50px;
  33. color: #4f5b66;
  34. opacity: 0;
  35. -webkit-transition: all .55s ease;
  36. -moz-transition: all .55s ease;
  37. -ms-transition: all .55s ease;
  38. -o-transition: all .55s ease;
  39. transition: all .55s ease;
  40. }
  41. .form-item-search-block-form input:-webkit-input-placeholder {
  42. color: #65737e;
  43. }
  44. .form-item-search-block-form input:-moz-placeholder {
  45. color: #65737e;
  46. }
  47. .form-item-search-block-form input:-ms-input-placeholder {
  48. color: #65737e;
  49. }
  50. #search-block-form:hover .icon,
  51. #search-block-form:focus .icon,
  52. #search-block-form:active .icon {
  53. outline: none;
  54. opacity: 1;
  55. margin-left: -50px;
  56. }
  57. #search-block-form:hover {
  58. cursor: pointer;
  59. cursor: hand;
  60. }
  61. #search-block-form:hover .icon {
  62. background: white;
  63. }