Tagged: ,

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • December 30, 2015 at 10:48 pm #558593
    jambrikp

    Hi,

    How can I turn off the shadow effect on the contact form active field?
    And how can I change the contact form submit button, like my fullwidth button style?
    Or can I use the fullwidth button element to submit and hide the original contact form submit button?

    Thank you
    Best Regaards,
    Peter

    December 31, 2015 at 3:29 am #558633
    Elliott

    Hi Peter!

    Send us a link to your page and we’ll take a look. You can set your reply as private if you wish.

    Best regards,
    Elliott

    December 31, 2015 at 11:40 am #558696
    jambrikp

    Hi Elliot!

    This is the page.

    Thank you
    Peter

    December 31, 2015 at 10:18 pm #558767
    Josue

    Hey!

    Try adding this code to the Quick CSS:

    #top .main_color .input-text, #top .main_color input[type='text'], #top .main_color input[type='input'], #top .main_color input[type='password'], #top .main_color input[type='email'], #top .main_color input[type='number'], #top .main_color input[type='url'], #top .main_color input[type='tel'], #top .main_color input[type='search'], #top .main_color textarea, #top .main_color select {
    outline: none;
    box-shadow: none;
}

#top .avia_ajax_form input.button {
    width: 100%;
    padding: 20px;
    font-size: 22px;
    color: black;
    background: white;
    border: 1px solid black;
}

#top .avia_ajax_form input.button:hover{
    color: black;
    background: white;
}

    Cheers! 
    Josue

    January 13, 2016 at 2:53 pm #564730
    jambrikp

    Thank you, its work, nice…

    But I have one more question:
    How can I do same hover effect to submit button like fullwidth button ?
    Its not border, its something else… how its work and how can I do same?

    Thank you
    Peter

    January 13, 2016 at 4:50 pm #564801
    Yigit

    Hey!

    Please add following code to Quick CSS 

    #top .avia_ajax_form input.button:hover {
    border-width: 2px;
    padding-bottom: 19px;
}

    Cheers!
    Yigit

    January 13, 2016 at 5:02 pm #564816
    jambrikp

    Hey Yigit!

    I think its not 2px border on fullwidth button its someting else… or just smoother?
    I put your code, please check the page. Thank you!

    Best Regards,
    Peter

    January 14, 2016 at 10:15 pm #565783
    Vinay

    Hey!

    Why don’t you want to use the submit button? it looks same to me however i see the button jump 2px when you hover… we can help you fix this. Please send us your wordpress admin details in a private message so we can login and take a look at it.

    If you like to use a full width button in place of original submit button it requires a lot of customization to the core files you can hire a freelancer to do this job.

    Regards,
    Vinay

    January 14, 2016 at 10:31 pm #565786
    jambrikp

    Hi

    I want to use the submit button but I would like same hover effect. Thats all :)
    Can you help me?

    Thank you
    Peter

    January 14, 2016 at 11:48 pm #565804
    Josue

    Hey!

    Remove this:

    #top .avia_ajax_form input.button:hover {
    border-width: 2px;
    padding-bottom: 19px;
}

    And add this:

    #top .avia_ajax_form input.button{
	transition: box-shadow ease-in 0.2s;
	box-shadow: inset 0 0 1px -1px black;
}
#top .avia_ajax_form input.button:hover {
	box-shadow: inset 0 0 1px 1px black;
}

    Cheers! 
    Josue

    January 27, 2016 at 4:15 pm #572990
    jambrikp

    It’s same. Thank you! :)
    Please close this topic.

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘Contact form submit button and shadow’ is closed to new replies.